1. Flex is short for Flexible Box, meaning “Flexible layout”, used to provide maximum flexibility for box-shaped models.

.container { display: flex; /* or inline-flex */ }
Copy the code

Flex six properties

flex-direction flex-wrap flex-flow justify-content align-items align-content
Copy the code

Flex -direction property

.container { flex-direction: row | row-reverse | column | column-reverse; } row (default) : the main axis is horizontal and the starting point is on the left. Row-reverse: The main axis is horizontal and the starting point is on the right. 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 lower.Copy the code

Flex-wrap property

.container{ flex-wrap: nowrap | wrap | wrap-reverse; } nowrap (default) : no line feeds. Wrap: the first line is at the top. Wrap-reverse: a new line, with the first line at the bottom.Copy the code

The flex-flow property (short for the flex-direction and flex-wrap properties, default is Row Nowrap)

The flex - flow: < > 'flex - direction' | | < > 'flex - wrap'Copy the code

5. Justify -content attribute

.container { justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly; } flex-start (default) : Align left Flex-end: align right Center: center space-between: Align both ends so that items are equally spaced. Space-around: Equally spaced on both sides of each project. The space between items is twice as large as the space between items and borders. Space-evenly: Distribution of items so that the space between any two items (and the space to the edges) is equal. Space-evenly does not apply to wechat PC and IE (not below IOS 10.3 and Android5.0).Copy the code

6. The align-items attribute

.container { align-items: stretch | flex-start | flex-end | center | baseline; } flex-start: aligns the starting point of the cross axis. Flex-end: End alignment of the cross axis. Center: Aligns the midpoint of the cross axis. Baseline: Baseline alignment of the first line of text in the project. Stretch (default) : If the project has no height set or is set to AUTO, it will take up the entire container height.Copy the code

7. The align-content attribute defines the alignment of multiple axes. This property does not work if the project has only one axis.

.container { align-content: flex-start | flex-end | center | space-between | space-around | stretch; } flex-start: aligns with the starting point of the cross axis. Flex-end: Aligns with the end of the cross axis. Center: Aligns with the midpoint of the cross axis. Space-between: aligns with both ends of the cross axis, and the spacing between the axes is evenly distributed. Space-around: the spacing on both sides of each axis is the same. Therefore, the spacing between the axes is twice as large as the spacing between the axes and the border. Stretch (default) : the axis takes up the entire cross axis.Copy the code

8. The order attribute defines the order in which items are arranged. The smaller the value, the higher the order, the default is 0.

.item { order: <integer>; /* default is 0 */ }
Copy the code

9. The Flex-grow property defines the scale at which the project can be scaled up. The default is 0, meaning that if there is room left, it will not be scaled up.

.item { flex-grow: <number>; /* default 0 */} If all projects have flex-grow properties of 1, they will equally divide the remaining space (if any). If one project's Flex-grow property is 2 and the others are all 1, the former will take up twice as much remaining space as the others.Copy the code

10. The Flex-shrink property defines the shrink scale of the project, which defaults to 1, meaning that the project will shrink if there is not enough space.

.item { flex-shrink: <number>; /* default 1 */ }
Copy the code

If all projects have a Flex-shrink property of 1, they will all be scaled down equally when space runs out. If one project has a Flex-shrink property of 0 and all other projects have a flex-shrink property of 1, the former does not shrink when space is scarce. Negative values are not valid for this property.

11. The Flex-basis property defines the main size of the project before allocating extra space. The browser uses this property to calculate whether the main axis has extra space. Its default value is Auto, which is the original size of the project.

.item { flex-basis: <length> | auto; /* default auto */ }
Copy the code

It can be set to the same value as the Width or height attribute (for example, 350px), and the project will occupy a fixed amount of space.

12. The Flex property is short for flex-grow, flex-shrink, and Flex-basis. The default value is 0 1 auto. The last two attributes are optional.

.item { flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] }
Copy the code

This property has two shortcut values: auto (1, 1 auto) and None (0, 0 auto).

13. The align-self property allows individual items to have different alignments than other items, overriding the align-items property. The default value is Auto, which means that the align-items property of the parent element is inherited, and is equivalent to stretch if there is no parent element.

.item { align-self: auto | flex-start | flex-end | center | baseline | stretch; }
Copy the code

Refer to external links:

www.ruanyifeng.com/blog/2015/0…

Css-tricks.com/snippets/cs…