See the blog of teacher Ruan Yifeng for details
The Flex layout is the flexible box layout. The elements that use the Flex layout are called Flex containers, or "containers" for short, and all of its child elements automatically become members of the container, called Flex projects, or "projects" for short.
Properties of the container:
1. The direction of the flex-direction main axis (that is, the arrangement direction of the items)
- row (default value): The main axis is in the horizontal direction, and the starting point is at the left end;
- row-reverse: The main axis is in the horizontal direction, and the starting point is at the right end;
- column: The main axis is in the vertical direction, and the starting point is at the upper edge;
- column-reverse: The main axis is in the vertical direction, and the starting point is at the bottom edge;
2. Flex-wrap wrap mode
- nowrap (default): no line break;
- wrap: wrap, the first line is above;
- wrap-reverse: wrap, the first line is below;
3.flex-flow
The flex-flow attribute is the short form of the flex-direction attribute and the flex-wrap attribute, and the default is row nowrap
4. Alignment of the justify-content property item on the main axis
- flex-start (default): left aligned
- flex-end: align right
- center: centered
- space-between: Justified at both ends, the space between items 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 distance between the items and the border
5. align-items : How to align items on the cross 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 project
- stretch: If the project is not set to height or set to auto, it will occupy the height of the entire container
6. align-content : the alignment of multiple axes
flex-start: Align with the starting point of the cross axis.flex-end: Align with the end point of the cross axis.center: Align 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. Therefore, the interval between the axes is twice as large as the interval between the axes and the frame.stretch(Default value): The axis occupies the entire cross axis.
Project properties
1.order: the order of items, the smaller the value, the higher the arrangement, the default is 0;
2. flex-grow : the zoom ratio of the item, the default is 0, if there is remaining space, it will not zoom;
3. flex-shrink : the project shrinking ratio, the default is 1, if the space is insufficient, the space will be reduced
If the flex-shrink property of all items is 1, when the space is insufficient, it will be reduced proportionally. When one of the items is 0 and the other items are 1, then the former will not shrink when the space is insufficient. (Negative value is invalid)
4. Flex-basis : The main axis space occupied by the project before the extra space is allocated. The default value is auto, which is the original size of the project.
5. flex : shorthand for flex-grow, flex-shrink and flex-basis, the default is 0 1 auto
6. align-self : Allows a single item to have a different alignment from other items, and can override the align-items attribute. The default value is auto, which means that the align-items attribute of the parent element is inherited. If there is no parent element, it is equivalent to stretch