flex layout – review

flex is flexible layout.
Any container can be designated as flex layout.
　 .box{display:flex}
Inline elements can use flex layout
　.box{display: inline-flex}
Browsers with webkit kernel must add the -webkit prefix.
　 .box{display:-webkit-flex; display:flex;}
Note: After an element is set to flex layout, the float, clear and vertical-align attributes of the child elements will be invalid.
Basic concept:
An element that uses flex layout is called a flex container, and all its child elements automatically become container members, called flex
items.
The container has two axes by default, the horizontal main axis (main axis) and the vertical cross axis (cross axis). The starting position of the main axis (the intersection with the frame) is called main start, and the ending position is called main end;
The starting position of the cross axis is called cross start, the ending position is called cross start, and the technical position is called cross end.
Single project The main axis space occupied is called main size and the cross axis space occupied is called cross size.

Container properties:
There are 6 properties set on the container.
flex-direction flex-wrap flex-flow justify-content
align-items align-content
1.flex-direction
The property determines the direction of the main axis (i.e. the arrangement direction of the items)
.box{flex-direction:row | row-reverse | column | column-reverse;}
row (default value) 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.
　　2.flex-wrap attribute
　　　By default, items are arranged on a line (also called an axis). The flex-wrap attribute defines how to wrap the line if an axis line
cannot be arranged.
　　　　　　　.box{flex-wrap: nowrap | wrap | wrap-reverse;}
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　  .box{flex-wrap: nowrap |
　　　　　　　　wrap: Wrap: line wrap, with the first line at the top.
　　　　　　　　wrap-reverse: Wrap, first line below.
　　　3.flex-flow
　　　　The flex-flow attribute is the abbreviation of the flex-direction attribute and the flex-wrap attribute. The default value is row nowrap.
　　　　.box{ flex-flow:<flex-direction> ; || <flex-wrap>;}
　　　　4.justify-content attribute
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 ] Because justified-content attribute
　　　 The attribute defines the alignment of the item on the main axis.
　　　　.box{justify-content: flex-start | flex-end | center | space-between | space-around;}
5 values, the specific alignment is related to the direction of the axis. It is assumed below that the main axis is the slave Left to right.
Flex-Start (default value): Left 对
Flex-End Right lying
Center 居
Space-Between: Align in both ends, and the interval between the projects is equal.
Space-around: The space on both sides of each item is equal, so the space between items is twice as large as the space between the items and the border.
　　5.align-items
　　　 The attribute defines how the items are aligned on the cross axis.
　　　　 .box{align-items: flex-start | flex-end | center | baseline | stretch;}
It may take 5 values. The specific alignment method is related to the direction of the cross axis. The following assumes that on the cross axis From top to bottom.
　　　　　　　flex-start: Align the starting point of the cross axis.
　　　　　　　flex-end: Align the end point of the cross axis.
　　　　　center: Align the midpoint of the intersection week.
　　　　　　baseline: Baseline alignment of the first line of text of the item.
　　　　stretch (default value) If the item does not set a height or sets auto, it will occupy the entire height of the container.
　　　6.align-content attribute
　　　　 The attribute defines the alignment of multiple axes. If the project can only have one axis, this attribute will not work.
　　　　　.box{align-content: flex-start | flex-end | center | space-between | space-around |
　　　　　stretch;}
　　　　 The attribute can take on 6 values.
　　　　　　　flex-start: Aligned 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: The intervals on both sides of each axis are equal.

　　　　　stretch(default value): The axis line occupies the entire cross axis.

Project properties
You can set 6 properties on the project.

Order flex-grow flex-shrink flex-basis flex align-self###

　　　1.order attribute
　　　　　order attribute defines the sorting order of items. The smallest value is, the higher the arrangement is. The default is o.
　　　.item { order: <integer>;}
　　　 2.flex -grow attribute
The flex-grow attribute defines the magnification ratio of the item. The default is 0, that is, if there is remaining space, it will also be enlarged.
　　　　　.item { flex-grow: <number>;}
　　　　 If all items have a flex-grow attribute of 1, they will enclose the remaining space. If an item's flex-grow attribute is 1 2. If all other items are 1, the former will occupy twice as much remaining space as other items.

3.flex-shrink attribute

The flex-shrink attribute defines the shrinkage ratio of the item. The default is 1, which means there is insufficient space, and the item will be shrunk.
　　　　　　.item{flex-shrink:<number>;}
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 If the flex-shrink property of all items is 1, when there is insufficient space, they will all be reduced proportionally.
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　If the flex-shrink attribute of an item is o and other items are 1, then when there is insufficient space, the former
will not shrink. Negative values ​​are not valid for this property.
　　　 4.flex-basis attribute
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　cco wealth willoy' '' The property defines the main axis space occupied by the item before allocating excess space. Based on this attribute, the browser calculates
whether there is excess space on the main axis. Its default value is auto, which is the original size of the project.
　　　　.item {flex-basis: <length> | auto;}
　　　　 It can be set to some value similar to the width or height attribute, then the item will occupy a fixed space.
　　　5.flex attribute
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
　　　　　.item { flex:none | [<'flex-grow'> <'flex-shrink'> ? || <'flex-basis'>]}
　　　　This attribute has two There are two shortcut values: auto (1 1 auto) and none (0 0 auto).
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
　　　　 Because the browser will calculate the relevant values
If other items have different alignments, you can override the align 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 equal to stretch.
self: auto | flex-start | flex-end | center | baseline | stretch;}
This attribute may take 6 values. Except for auto, the others are exactly the same as the align-items attribute.

For more flex layout - to review related articles, please pay attention to the PHP Chinese website!