Flex layout
Meaning : Flex is the abbreviation of Flexible Box, which means "flexible layout" and is used to provide maximum flexibility for box-shaped models.
flex-direction
The flex-direction property determines the direction of the main axis (that is, the direction in which items are arranged).
row (default) : The main axis is horizontal and the starting point is at the left end.
row-reverse : The main axis is horizontal and the starting point is at the right end.
column : The main axis is vertical, and the starting point is on the upper edge.
column-reverse : The main axis is vertical and the starting point is at the lower edge.
flex-wrap
If one axis line cannot be arranged, how to wrap the line?
nowrap (default) : Do not wrap.
wrap : Wrap, with the first line at the top.
wrap-reverse : wrap, first line below.
flex-flow
The flex-flow property is the abbreviation of the flex-direction property and the flex-wrap property. The default value is row nowrap.
.box {
flex-flow: <flex-direction> <flex-wrap>;
}
justify-content
Define the alignment of items on the main axis
flex-start (default value) : left-aligned
flex-end : right-aligned
center : centered
space-between : aligned at both ends, with equal spacing between items.
space-around : Each item is equally spaced on both sides. Therefore, the space between items is twice as large as the space between items and the border.
align-items
Defines how items are aligned on the vertical axis
flex-start : Align the starting point of the cross axis.
flex-end : align the end of the cross axis.
center : align the midpoint of the cross axis.
baseline : The baseline alignment of the first line of text of the item.
stretch (default value) : If the item does not set a height or is set to auto, it will occupy the entire height of the container.
align-content
Defines the alignment of multiple axes. This property has no effect if the project has only one axis.
- Align horizontally when row is set
- Align vertically when column is set
flex-start : Align with the starting point of the cross axis.
flex-end : aligned with the end point of the cross axis.
center : Aligned with the midpoint of the cross axis.
space-between : Align with both ends of the cross axis, and the intervals between the axes are evenly distributed.
space-around : Each axis is equally spaced on both sides. Therefore, the distance between the axes is twice as large as the distance between the axes and the frame.
stretch (default) : The axis occupies the entire cross axis.
other
order
order : The order attribute defines the order in which items are sorted. The smaller the value, the higher the ranking. The default is 0.
.item {
order: <integer>;
}
flex
flex : The flex attribute is the abbreviation of flex-grow, flex-shrink and flex-basis. The default value is 0 1 auto. The last two properties are optional.
.item {
flex: 1 | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
- flex-grow : The flex-grow attribute defines the magnification ratio of the item. The default is 0, that is, if there is remaining space, it will not be enlarged.
.item {
flex-grow: <number>; /* default 0 */
}
- flex-shrink : The shrink ratio of the item, the default is 1, that is, if there is insufficient space, the item will shrink.
.item {
flex-shrink: <number>; /* default 1 */
}
- flex-basis : The main size of the item before allocating excess space. The browser uses this attribute to calculate whether there is extra space on the main axis. Its default value is auto, which is the original size of the project.
.item {
flex-basis: <length> | auto; /* default auto */
}
align-self
align-self : The align-self attribute allows a single item to be aligned differently from other items and can override the align-items attribute. The default value is auto, which means inheriting the align-items attribute of the parent element. If there is no parent element, it is equivalent to stretch.
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
Except auto, everything else is exactly the same as align-items attribute.
Source code github Flex-layout
refers to Ruan Yifeng Flex layout tutorial