2024年12月8日 (日) 15:19的最新版本

Basics

If “regular” layout is based on both block and inline flow directions, the flex layout is based on “flex-flow directions”.

Flex properties

Direction

This establishes the main-axis, thus defining the direction flex items are placed in the flex container. Flexbox is (aside from optional wrapping) a single-direction layout concept.

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

Align self

Issue: Flexbox "align-items : center" shrinks a child's max-width^[1]

.container {
  align-self: center;
  max-width: 200px;
  width: 100%;
}

↑ https://stackoverflow.com/questions/35836415/flexbox-align-items-center-shrinks-a-childs-max-width

[1] ttps://stackoverflow.com/questions/35836415/flexbox-align-items-center-shrinks-a-childs-max-width

[1]

@@ 第2行： / 第2行： @@
 If “regular” layout is based on both block and inline flow directions, the flex layout is based on “flex-flow directions”.
-[[文件:Flex-basis.svg|400px]]
-* '''main axis''' – The main axis of a flex container is the primary axis along which flex items are laid out. Beware, it is not necessarily horizontal; it depends on the <code>flex-direction</code> property
+[[文件:Flex-basis.svg|400px|thumb]]
-* '''main-start | main-end''' – The flex items are placed within the container starting from main-start and going to main-end.
-* '''main size''' – A flex item’s width or height, whichever is in the main dimension, is the item’s main size. The flex item’s main size property is either the ‘width’ or ‘height’ property, whichever is in the main dimension.
-* '''cross axis''' – The axis perpendicular to the main axis is called the cross axis. Its direction depends on the main axis direction.
+= Flex properties =
-* '''cross-start | cross-end''' – Flex lines are filled with items and placed into the container starting on the cross-start side of the flex container and going toward the cross-end side.
+== Direction ==
-* '''cross size''' – The width or height of a flex item, whichever is in the cross dimension, is the item’s cross size. The cross size property is whichever of ‘width’ or ‘height’ that is in the cross dimension.
+This establishes the main-axis, thus defining the direction flex items are placed in the flex container. Flexbox is (aside from optional wrapping) a single-direction layout concept.
+[[File:flex-direction.svg|200px|thumb|flex-direction]]
+<syntaxhighlight lang="css">
+.container {
+  flex-direction: row | row-reverse | column | column-reverse;
+}
+</syntaxhighlight>
+== Align self==
+[[File:align-self.svg|200px|thumb|align-self]]
+Issue: Flexbox "align-items : center" shrinks a child's max-width<ref>https://stackoverflow.com/questions/35836415/flexbox-align-items-center-shrinks-a-childs-max-width</ref>
+<syntaxhighlight lang="css">
+.container {
+  align-self: center;
+  max-width: 200px;
+  width: 100%;
+}
+</syntaxhighlight>