What is the
Flex is short for Flex Box, which translates as “flexible layout”. An elastic layout, literally, is a “talk about everything” layout, similar to a container of variable width, in which all content can be extended, often widely used on mobile
Learn what
- The box model layout differs from the Flex layout
- Flex container
- The Flex project
The box model layout differs from the Flex layout
- Traditional layout, based on the box model, relies on display, float, position, etc. to achieve special layout effects
- Flex layouts, based on axes, provide easy, complete, and responsive page layouts
Flex container
Elements with a Flex layout are called Flex containers, or “containers” for short.
The Flex container has six properties: flex-direction, flex-wrap, flex-flow, context-content, align-items, and align-Content
1. The flex-direction attribute determines the direction of the main axis (that is, the alignment of items).
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 at the right end. Column: The main axis is in the vertical direction, and the starting point is in the upper edge. Column-reverse: the main axis is vertical and the starting point is at the bottom.
The flex-wrap property defines how to wrap a line if an axis does not fit.
Nowrap (default) : no line breaks. Wrap: The first line is at the top. Wrap-reverse: newline with the first line at the bottom.
3. Flex-flow The flex-flow property is a short form of the flex-direction and flex-wrap properties. The default value is row nowrap.
The context-content attribute defines the alignment of items on the main axis.
Flex-start (default) : left-align Flex-end: right-align center: center space-between: align both ends with equal intervals between items. Space-around: Equal spacing on both sides of each item. As a result, the spacing between items is twice as large as the spacing between items and the border.
The align-items property defines how items are aligned on the cross axis.
Flex-start: Alignment of the starting point of the cross axes. Flex-end: alignment of ends of crossed axes. Center: Alignment of the midpoint of the cross axis. Baseline: The baseline alignment of the first line of text of the project. Stretch (default) : If the height is not set or auto is set, the project will occupy the entire height of the container.
The align-content property defines the alignment of multiple axes. This property has no effect if the project has only one axis. Flex-start: align 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 intersecting axis. Space-between: aligned with both ends of the intersecting axes, with evenly distributed spacing between axes. Space-around: The spacing on both sides of each axis is equal. Therefore, the spacing between axes is twice as large as the spacing between axes and borders. Stretch (default) : Axis takes up the entire cross axis.
The Flex project
All child elements of a Flex container automatically become members of the container and are called Flex items, or “items” for short.
Project attributes
- Order: Property defines the order of items. The smaller the value is, the more advanced it is. The default value is 0.
- Flex-grow: property defines the zoom scale of the project. Default is 0, that is, no zoom if there is free space. (If all projects have a flex-Grow attribute of 1, they divide the remaining space equally, if any.) If one project has a flex-grow attribute of 2 and all the other projects are 1, the former takes up twice as much free space as the others.)
- Flex-shrink: The flex-shrink attribute defines the scale by which the project shrinks. The default is 1, that is, if there is insufficient space, the project shrinks. (If all projects have a Flex-shrink attribute of 1, they are scaled equally when space is insufficient. If the flex-shrink attribute is 0 for one project and 1 for all other projects, the former does not shrink when space is insufficient. Negative values have no effect on this property.
- Flex-basis: Property defines the main size of the project before allocating extra space. Based on this property, the browser calculates whether the main axis has extra space. Its default value is Auto, the original size of the project.
- Flex: The properties are short for flex-grow, flex-shrink, and flex-basis. The default value is 0 1 auto. The last two attributes are optional.
- Align-self: Property allows a single item to have a different alignment than other items, overriding the align-items property. The default value is auto, which inherits the align-items property of the parent element. If there is no parent element, it equals stretch.
conclusion
Flex layout is something you come across a lot in your work.
I wish good
reference
- The beauty of the flex layout zhuanlan.zhihu.com/p/208483276
- Flex case codepen. IO/enxaneta/PE…