Let’s start
< p>1. flex-direction about the alignment of the main axis
< strong> column top to bottom
row from left to right–>default value
row-reverse right to left
column-reverse bottom to top
2. flex-wrap about the wrapping of the flexible box
warp From left to right, top to bottom When the width is greater than the width of the flex-box, it will automatically wrap to the next line
and the height of the flex-box will be divided equally according to the total number of rows–>default value
The effect of warp-reverse is the same as warp. The difference is that its arrangement is in reverse order, from left to right but from bottom to top
3. align-items about the alignment of the cross axis (current line)
stretch default attributes
flex-start makes the elements start at the upper left corner of the flex box and sort them to the right. If the width is greater than the flex-box width p>
will reduce the width of all child elements proportionally
< p> flex-end is the same as flex-start, the difference: no matter how many lines the flex box has, the height of the flex box will be changed
divide equally, and then make the sub-elements at the bottom left of each line of the flex-box The corner starts to be sorted to the right
center according to the number of flex-box lines Reline the child elements of each row vertically and sorted from left to right Baseline When the flex-box is horizontal, this attribute will participate in the baseline alignment, otherwise it is equivalent to flex-start
4. align-content multi-line alignment Method
flex-start arranged closely to the upper left corner
flex-end arranged close to the bottom left corner< /p>
space-around The distance between the first and last lines of the border is half of the line spacing< /strong>
space-between The first and last lines are close to the border, and the other lines are evenly distributed. Spacing is equal
5. justify- content Alignment of the flexible box on the main axis or lateral axis
flex -start aligns closely to the upper left corner of the current axis
flex-end and The direction of flex-start is opposite
space-around first and last line The distance from the border is the same size and half of the line spacing
space-between The first and last lines are close to the border, and the other lines are even Distribution, line spacing is equal
center set alignment to horizontal center< /span>
In the use of flexible box flex layout At this time, all elements involving width and height should be defined as percentages.
This is so that when the overall width and height of the box change, it will not affect the overall layout of the page.
The right one is the HTML code of the flex layout
On the left is the effect of page display
Next this is the CSS code for the flex layout of the page effect
< span style="font-family: regular body; font-size: 16px;">
First of all, it’s The elements inside the layout are changed to flex ——> which is display: flex
After , set the width of the four li in each div element –> calculated as a percentage
Then, add styles to the content in each li element
When everything is done, this is a simple flex layout, which will not change the overall style due to the expansion and contraction of the page width
< p> but adaptively change the width of its own elements according to the overall width and height of the page
—————–> also There will be no weird feeling that the text does not match the page