By zhangxinxu from www.zhangxinxu.com/wordpress/?… This article can be reprinted in full, but with the written permission of the original author, while retaining the original author and source, the abstract drainage is optional.
// ZXX: All layout effects (including interaction) in this tutorial are rendered in real time, if the layout is abnormal, you can click here to access the original text.
I. Preface & index
Display :flex for block elements like div or display:inline-flex for inline elements like SPAN. Flex layout is created! The elements that directly set display:flex or display:inline-flex are called flex containers, and the children inside are called Flex children.
Flex layout properties are split into two sets, one for the Flex container and one for Flex children. See the following table for details, click to quickly index.
Apply to the Flex container | Applies to the Flex child |
---|---|
|
|
Whether applied to the Flex container or to flex children, you control the rendering of flex children, except that the former controls the whole, while the latter controls the individual.
Other notes:
- The HTML structure of all cases in this tutorial is:
Container (Flex) div(Flex child) > IMG div(Flex child) > imgCopy the code
At the same time, the Flex container area is marked with a dotted box for easy differentiation, and the Flex subitems have a white and blue radial gradient background color, with the original serial number displayed on the image.
- Flex layouts also have the concepts of axes and cross axes, but to avoid too much conceptual clutter, this tutorial omits the wording and uses horizontal and vertical directions instead1..
// ZXX: ① The writing-mode attribute can change the direction of the document flow, and the main axis of the document flow is vertical.
CSS properties applied to Flex containers
1. flex-direction
Flex-direction controls the overall layout direction of a child item, from left to right or right to left, and from top to bottom or bottom to top. Compared to the DIRECTION property of CSS, there is flex.
The syntax is as follows:
flex-direction: row | row-reverse | column | column-reverse;Copy the code
Among them:
- row
-
The default value is displayed as a row. The direction is the current horizontal flow of the document, which is left to right by default. If the current horizontal document flow direction is
rtl
(such as setting
direction:rtl
), from right to left. - row-reverse
-
Displays as rows. But the direction and
row
Property values are reversed. - column
- Displays as columns.
- column-reverse
-
Displays as columns. But the direction and
column
Property values are reversed.
Seeing is believing. Click the corresponding radio option below to see the real-time layout effect:
row row-reverse column column-reverse
2. flex-wrap
Flex-wrap is used to control whether the entire subitem is displayed on a single line or wrapped, and if wrapped, whether the following line is displayed in reverse. This property is easy to remember. In the CSS world, whenever you see the word wrap it must be associated with a newline display, word-wrap property or white-space:nowrap or pre-wrap.
The syntax is as follows:
flex-wrap: nowrap | wrap | wrap-reverse;Copy the code
Among them:
- nowrap
-
The default value is displayed on a single line without line breaks. Therefore, it is easy to appear the scene of width overflow, and its rendering performance is relatively complex, so it is necessary to have a certain understanding of CSS3 width, you can read”
Understand CSS3 Max /min-content and fit-Content width values”This article. The specific performance is as follows (taking horizontal layout as an example) :- Minimum flex child content width
min-content
If the sum is greater than the width of the Flex container, the contents overflow, representing andwhite-space:nowrap
Similar. - If the Flex child has a minimum content width
min-content
If the sum is less than the flex container width:- Default for flex subitems
fit-content
If the sum of the widths is greater than the width of the Flex container, the flex child widths shrink to fill the Flex container without overflow. - Default for flex subitems
fit-content
If the sum of the widths is less than the width of the Flex container, the Flex child entries arefit-content
The width is displayed normally, and the content does not overflow.
- Default for flex subitems
In the following example, the image has a default max-width:100%. The Flex child div does not have a width. Therefore, the minimum width of the Flex child is infinitesimally small, which is displayed as the image width shrinks. If we cancel the max-width:100% style, then the minimum width of the Flex child is the width of the image, and we can see that the image has spilled out of the Flex container.
- Minimum flex child content width
- wrap
- Insufficient width for line feed display.
- wrap-reverse
- The width is not enough for the newline display, but it starts from the bottom up, that is, the child that originally had the newline below now goes to the top.
Seeing is believing, click the corresponding single check box below to see the real-time layout effect:
img{max-width:100%; }
nowrap wrap wrap-reverse
3. flex-flow
The flex-flow attribute is short for flex-direction and flex-wrap and represents the flow characteristics of a Flex layout. The syntax is as follows:
The flex - flow: < > 'flex - direction' | | < > 'flex - wrap'Copy the code
When multiple attributes are used at the same time, separate them with Spaces.
For example, the container element is set as follows:
.container {
display: flex;
flex-flow: row-reverse wrap-reverse;
}Copy the code
The real-time effects are as follows:
You can see that the horizontal sorting is from right to left (row-reverse) and that the newline is on top (wrap-reverse).
4. justify-content
The justify-content attribute determines how horizontal children are aligned and distributed. CSS text-align has an attribute of justify, so when you want to control horizontal alignment of Flex elements, remember the word justify and the context-content attribute.
Illustration-content can be thought of as a distant cousin of text-align, except that the former controls horizontal alignment of flex elements plus distribution, while the latter controls horizontal alignment of inline elements.
The syntax is as follows:
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;Copy the code
Among them:
- flex-start
- The default value. Logical CSS property value, which is related to the document flow direction. The default is left justified.
- flex-end
- Logical CSS property value, which is related to the document flow direction. The default is right justified.
- center
- It is centered and aligned.
- space-between
- Both ends are aligned. Between stands for middle, meaning that extra space is allocated only in the middle of the element. The abstract graph is shown as follows:
- space-around
- Around means around, which means that each Flex subitem is surrounded by a non-interfering equal width of white space on both sides, resulting in a visual margin that is half the width of the middle. The abstract graph is shown as follows:
- space-evenly
- Instituted means even, equal. That is, visually, the space between the two sides of each Flex subitem is exactly equal. The abstract graph is shown as follows:
Seeing is believing, click the corresponding single check box below to see the real-time layout effect:
Direction: RTL (test flex-start/flex-end)
flex-start flex-end center space-between space-around space-evenly
5. align-items
Align-items refers to flex items, so align-items refers to how flex items are aligned vertically relative to the Flex container, are they aligned together at the top, at the bottom, or stretched, and so on.
The syntax is as follows:
align-items: stretch | flex-start | flex-end | center | baseline;Copy the code
Among them:
- stretch
- The default value. Flex subitems stretch. In the demo, we can see that the white and blue radial gradient background area runs up and down the Flex container because the height of the Flex child stretches to the height of the container. If the Flex child has a height set, render at that height instead of stretching.
- flex-start
- Logical CSS property value, which is related to the document flow direction. The default is container top alignment.
- flex-end
- Logical CSS property value, which is related to the document flow direction. The default is bottom alignment of the container.
- center
- It is vertically centered and aligned.
- baseline
-
Represents that all Flex children are relative to the baseline of the Flex container (
The lower edge of the letter XAligned).
Seeing is believing, click the corresponding menu box below to see the real-time layout effect:
stretch flex-start flex-end center baseline
6. align-content
Align-content can be thought of as a similar, but opposite, property to justify-content, which specifies the alignment and distribution of flex children horizontally, and the alignment and distribution of flex elements vertically for each row. The align-content property has no effect if all flex children have only one line.
The syntax is as follows:
align-content: stretch | flex-start | flex-end | center | space-between | space-around | space-evenly;Copy the code
Among them:
- stretch
- The default value. Each row of Flex child elements is stretched proportionally. For example, if there are two rows of Flex child elements, the stretch height of each row is 50%.
- flex-start
- Logical CSS property value, which is related to the document flow direction. The default is top stacking.
- flex-end
- Logical CSS property value, which is related to the document flow direction. The default is bottom stack.
- center
- The whole is vertically centered and aligned.
- space-between
- The upper and lower lines are aligned at both ends. And then we’re left with the remaining space equally divided for each row.
- space-around
- Each row of elements has independent, non-overlapping white space above and below it.
- space-evenly
- Each row of elements is exactly equal to the top and the bottom.
Seeing is believing, we set the Flex container to a height of 500 pixels and click the corresponding checkbox below to see the layout in real time:
stretch flex-start flex-end center space-between space-around space-evenly
CSS properties that apply to flex subitems
1. order
We can change the sort position of a flex child item by setting order.
Grammar:
order: <integer>; /* Integer value, default is 0 */Copy the code
The default order attribute value for all Flex children is 0, so if we want a flex child to be displayed first, we can set it to an integer less than 0, such as -1.
Seeing is believing. The flex container has three children below. Now, let’s set the order attribute value to the second child and see how its placement changes. Click on the box below to see the real-time interaction:
order:-1 order:0 order:1
2. flex-grow
The flex-grow attribute is used to expand the space occupied by the flex child. The space occupied by the flex child is the space left by the element.
The exact extension is complicated. Before we expand, let’s look at the syntax.
Grammar:
flex-grow: <number>; /* The value can be a decimal. The default value is 0 */Copy the code
Flex-grow does not support negative values and defaults to 0 to expand its width without using the remaining white space. If flex-grow is greater than 0, the allocation of the remaining flex container space occurs as follows:
- The total amount of free space is 1.
- If only one Flex child is set
flex-grow
Attribute values:- if
flex-grow
If the value is less than 1, the expanded space is the total remaining space and the calculated value of this ratio. - if
flex-grow
If the value is greater than 1, all remaining space is reserved.
See “Grow Case 1” below for details.
- if
- If there are multiple Flex Settings
flex-grow
Attribute values:- if
flex-grow
If the sum of values is less than 1, the space expanded by each subitem is set to the total free space and the current elementflex-grow
The calculated value of the ratio. - if
flex-grow
If the sum of the values is greater than 1, all the remaining space is used, and the allocation ratio isflex-grow
Ratio of attribute values. For example, all flex children are setflex-grow:1
, indicates that the remaining blank space is divided equally, if setflex-grow
With a ratio of 1:2:1, the flex child in the middle takes up half of the space, and the remaining two elements are split equally.
See “Grow Case 2” below for details.
- if
Grow case 1: The Flex container has three children. For now, let’s just set the flex-grow property value to the second child and see how its size changes. Click on the box below to see the real-time interaction:
Flex – turns: zero flex – turns: 0.5 the flex – turns up: 1 flex – turns: 2
In this example, only one flex child sets the flex-grow property value. When 0.5 is selected, the value is less than 1 and the remaining space is not used up. Therefore, the width of the extension is 0.5, which is half of the total remaining space. When we choose 1, we’re using all the space; When we select 2, the effect is the same, because there are no other children participating in the assignment, so the render behaves the same as 1.
The flex container has three children, all of which are set to flex-grow:0.25 by default. Now let’s click on the box below and change the flex-grow property value of the second child to see how its size changes:
Flex – turns: zero flex – turns: 0.25 the flex – turns: 0.5 the flex – turns up: 1
In this example, because all three subitems are 0.25, there is 25% free space left by default. If we select Flex-grow :0, the total flex-grow is 0.5, so 50% space is left; If we choose Flex-grow :0.5, the total flex-grow is 1, so there is no space left, and the space occupancy ratio is 1:2:1. The result is as expected. If we choose Flex-grow :1, the total flex-grow is greater than 1, and the remaining space is proportionally allocated at 1:4:1, which is exactly what we end up with.
That’s how the flex-grow property works.
3. flex-shrink
Shrink means “shrink”, and flex-shrink mainly deals with the percentage of individual elements shrunk when there is insufficient space in the Flex container.
The syntax is as follows:
flex-shrink: <number>; The default value is 1 */Copy the code
Flex-shrink does not support negative values. The default value is 1, which means that all Flex subentries shrink by default. If set to 0, it does not shrink and keeps the original fit-Content width.
The kernel of flex-shrink is very similar to flex-grow, which is how space is used when there is enough space, and flex-grow, which is how space is shrunk when there is not enough space. There’s always a hint of CP.
The rules are similar. Given that the Flex child does not wrap and has insufficient container space, the insufficient space is the “fully shrunk size” :
- If only one Flex child is set
flex-shrink
:flex-shrink
If the value is less than 1, the shrinkage is incomplete and some of the content will overflow the Flex container.flex-shrink
If the value is greater than or equal to 1, the contraction is complete and fills the Flex container.
- If more than one Flex child is set
flex-shrink
:flex-shrink
If the sum of the values is less than 1, the shrinking size is incomplete, and the ratio of the shrinking size of each element to the “fully shrinking size” is setflex-shrink
The value of the.flex-shrink
If the sum of the values is greater than 1, the contraction is complete, and the sum of the proportions of the shrinking dimensions of each elementflex-shrink
The proportions of the values are the same. The following example demonstrates this scenario.
Seeing is believing. The Flex container has four child elements. Now, let’s set the second child to a different flex-shrink attribute value to see how it changes in size. Click on the box below to see the real-time interaction:
Flex – the shrink: zero flex – the shrink: 0.5 the flex – the shrink: 1 flex – the shrink: 2
In this example, because all four subitems are 1, and are much larger than 1, it is completely contracted and there is no overflow. If flex-shrink:0 is selected, the second Flex subitem does not shrink and the remaining three Flex subitems shrink equally. If we select Flex-grow :1, the four children shrink 1:1:1:1; If we select Flex-grow :2, the full shrink size ratio is assigned to 1:2:1:1, with the second Flex child shrinking by twice the width of the other elements.
This is how the Flex-Shrink attribute works.
4. flex-basis
Flex-basis defines the default size of an element before the remaining space is allocated. It is equivalent to telling the browser in advance: Brother browser, I need to take up so much space, please reserve it for me in advance.
The syntax is as follows:
flex-basis: <length> | auto; /* The default is auto */Copy the code
The default value is auto. If width is set, it takes up space. If width is not set, it takes up space.
If you set width and flex-basis at the same time, width is ignored for rendering performance. Flex stands for elastic, so it is not actually recommended to use the width attribute for flex children because it is not elastic enough.
When there is insufficient free space, the actual width of flex children is not usually the flex-basis size set, because flex layouts shrink by default when there is insufficient free space.
Example one: The Flex container has three child elements. Now, let’s give the second child a different flex-basis attribute value to see how its size changes. Click on the box below to see the real-time interaction:
flex-basis:64px flex-basis:96px flex-basis:128px flex-basis:256px
Select the last flex-basis:256px and you will find that the width of the Flex subitems is not 256px because there is not enough space left and the three subitems shrink 1:1:1.
5. flex
The Flex attribute is a contraction of flex-grow, flex-shrink, and Flex-basis.
Grammar:
flex: none | auto | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]Copy the code
The second and third parameters (flex-shrink and flex-basis) are optional. The default value is 0.
Case demonstration:
The second Flex child is set to Flex: None or flex: Auto, and let’s see how the layout changes in real time:
Hide part of image to make space free (to test flex-grow)
Default value flex: None Flex :auto
The second flex subentry has flex-grow, flex-shrink, and flex-basis values of 0,1, and auto, respectively.
After the above tests, we can draw the following conclusions:
flex
The default value is equivalent toflex:0 1 auto
;flex:none
Is equivalent toflex:0 0 auto
;flex:auto
Is equivalent toflex:1 1 auto
;
6. align-self
Align -self controls the vertical alignment of a single Flex item. The align-items property written on the Flex container, followed by items, has an S for the items, and is all. Here’s self, a single individual. Other differences are minor and the syntax is almost the same:
align-self: auto | flex-start | flex-end | center | baseline | stretch;Copy the code
The only difference is that align-self has an auto (the default) that inherits the align-items property from the Flex container. Other attribute values have the same meanings, as illustrated in the following cases:
First we set the Flex container baseline alignment, and then click on the box below to set the second Flex child to a different align-self attribute value and see how it behaves:
.container {
display: flex;
align-items: baseline;
height: 240px;
}Copy the code
auto flex-start flex-end center baseline stretch
4. Other Flex knowledge
- In Flex layout, the Settings of Flex child elements
float
.clear
As well asvertical-align
Attributes are useless. - The Flexbox layout works best for components and small-scale layouts of applications, while the Grid layout works best for larger layouts.
- It has been 8102 years, so the old Flex syntax is no longer needed, and private prefixes are no longer needed.
The advantage of this tutorial is that the interaction can be experienced in real time and is more intuitive. If it is to reprint the article, must have no effect, access to the original.
To be honest, I have used very little Flex layout before, and this article is also written while learning, if there is any inaccurate expression in the article welcome to correct.
Thanks for reading!
See article: A Complete Guide to Flexbox
CSS World
Click to display the purchase code
// Want a tip? Click here. Got something to say? Click here.