There are many excellent flex tutorials available online. But after I have learned it once, the next time I read it again, I will be lost and have to learn it all over again and keep up with the author’s ideas. So this time I will write a blog according to my own ideas to help myself understand.
Flex layout basic properties
Flex mainly learns the arrangement of main and auxiliary axes
Flex, short for Flexible Box, is designed to provide maximum flexibility to boxed models.
Any container can be specified as a Flex layout.
display:flex;
display:inline-flex
Note that with Flex layout, the float, clear, and vertical-align attributes of the child elements are invalidated.
Parent box spindle
Flex-direction Defines the spindle direction
The flex – direction: row | column | row – reverse | column – reverse respectively is: horizontal vertical – horizontal flip – vertical flip
If it’s row, it starts from the left, and row-reverse is the opposite
If it’s column, it goes from top to bottom, column-reverse is the opposite
Flex-wrap defines whether line breaks are enabled
It may take three values:
Nowrap (default) : no line breaks. Not wrapping a line may cause subbox width compression
Wrap: The first line is at the top.
Wrap-reverse: newline with the first line at the bottom.
The flex – flow shorthand
You can abbreviate the Flex orientation and newline or not Settings
Order: flex – flow: flex – direction | flex – wrap
Illustration-content defines the arrangement of the elements of the main axis
It might take five values, aligned in a way that depends on the direction of the axis. So let’s say that the principal axis is going from left to right.
Flex-start (default) : left-aligned
Flex-end: right-aligned
Center: a center
Space-between: both ends are aligned 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.
Parent box sub shaft
If the main axis is the X-axis, then the secondary axis is the Y-axis. Vice versa
Align-items defines the arrangement of sub-axes
It could take five values. The exact alignment depends on the direction of the intersecting axis, which is assumed to run from top to bottom.
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.
Align-content defines the alignment of multiple axes
If there’s only one axis, it doesn’t work
The property may take six values.
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 parent box is briefly summarized
When setting up Flex, you need to determine the main axis orientation and whether to break lines. You can use flex-flow to set up flex.
When you have set up the spindle and need to manipulate it, use context-content.
If you want to operate on a secondary axis, use align-items. In the case of multiple lines where you need to set the secondary axis, use align-content.
Subbox operation
Order can define the order of subboxes
The default value of order is 0, negative or higher.
Align-self defines the arrangement of special subboxes
The 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
The Flex-grow property defines the space taken up by the child box
The default is 0.
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 other items.
The Flex-shrink attribute controls the size of the project
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.
The last
A fun little Flex game ~ Practice twice is better than anything
FLEXBOX FROGGY