The following questions about flex should be understood to help us better understand the layout.
1. What are the values of flex auto, none, 0, 1, and initial? what's the effect? What's the performance?
2. What is the difference between flex-basis and width? Single value flex-basis: the difference between 0 and auto? Is flex-basis: 100px the same as width: 100px?
3. How to understand the remaining space?
Next, we will answer these questions one by one.
1. What Are the Values of flex auto, none, 0, 1, and initial?
flex: auto is 1 1 auto
flex: none is 0 0 auto
flex: 0 is 0 1 0
flex: 1 is 1 1 0
flex: initial is 0 1 auto
What I think is important is the default value of this flex, which is initial. Because in most cases, we are modifying the default value. Other things that are not easy to remember will also become easier with reference.
So, what are the functions and manifestations of the above five situations?
flex: initial (default)
The parent box is set to a flexible box, and the child element defaults to the initial, which is generally used to restore the default value. The performance is not to increase but to decrease, and the width refers to itself.
flex: 1
Generally used for equal division (after allocating the remaining space, it is expressed as equal division). The performance will increase and decrease accordingly, and the minimum width of the width content area (before the remaining space is allocated).
flex: 0
Uncommonly used. The performance will not increase but will decrease, the minimum width of the width content area (after allocating the remaining space).
flex: auto
It is generally used in scenarios where the longer the text and the wider the element. The performance will increase and decrease accordingly, and the width refers to itself.
flex: none
Generally used to maintain the width of the element itself, and the text does not wrap. The performance will not increase or decrease with it, and the width refers to itself.
2. What Is the Difference Between flex-basis and width?
Both are used to change the width of the flexbox element.
flex-basis has higher priority than width. If flex-basis is auto, then the element will refer to width; if flex-basis is not auto (eg: 0, 200px, etc.), then the element will ignore width (even if you set width) and use the value of flex-basis.
Another question, is flex-basis: 100px the same as width: 100px (flexbox can be reduced as a precondition)?
First of all, the conclusion is that it is different!
width: 100px + flex-basis: auto === element 100px
content + flex-basis: 100px === max(content, flex-basis: 100px) >= element 100px
Analysis, there are the following two situations.
When the element flex-basis is auto, the width is set to 100px. then when shrinking the flexbox, the element is always 100px and doesn't change. Then if the width of the content area of the element exceeds 100px (such as embedded images, font-size size, etc.), the element will not be enlarged, and it is a fixed value of 100px.
When the element flex-basis is not auto, it is useless to set the width, and the value of flex-basis is preferred. If the flex-basis is 100px, then if the width of the content area of the element exceeds 100px (such as embedded images, font-size size, etc.). Then, contrary to the result of setting the width, the element will be enlarged, and the final calculated width will be greater than 100px.
The width is hard to write, no matter how it is changed, the element is so wide. flex-basis means that the element is roughly this wide. If there is an unexpected situation, then I will also change.
For example, you are working overtime at night and your girlfriend wants you to stay with her for an hour. But it's uncertain how long the delay will be. Then. . .
Understanding of width: I am a responsible man. An hour is not more than a minute, and it will not change the hour for any statement.
Understanding of flex-basis: A girlfriend is more important than anything. If she doesn't make a fuss, the hour will end on time. Alas, it is also possible to toss until tomorrow morning. There's nothing I can do because she's the most important thing to me.
3. How to Understand the Remaining Space?
The width of the element that opens the flexbox is the total space.
After removing the fixed width of all child elements, the remaining space is called the remaining space.
If the child element has a width attribute, then removing the width is the remaining space. If the child element has a flex-basis: 100px, there are two cases.
If 100px is less than the total width, then removing the flex-basis is the remaining space.
If 100px is greater than the total width, then there is no space left.
If the reduction factor flex-shrink is 0, then the element is 100px and behaves beyond the parent box. If the reduction factor flex-shrink is not 0, the final width of the element is also less than 100px.