This article refers to zhang Xinxu’s article, and Ruan’s flex layout, part of the picture and paragraph structure is consistent, only as a personal summary, infringement deleted.
Flex Properties
Flex layouts are often used in projects, but the specific usage and usage scenarios of several Flex values are sometimes unclear, so this article summarizes. First, the Flex attribute is a shorthand for flex-grow, flex-shrink, and Flex-basis. The default value is 0. The last two attributes are optional. So understand what the three properties mean and what they do, what the Flex abbreviation means, and then you can use Flex as you like in your development.
flex-grow
The Flex-Grow property defines the project’s zoom scale, which defaults to 0, or 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 other items.
flex-shrink
The Flex-shrink attribute defines the scale by which a 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.
flex-basis
The 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. It can be set to the same value as the width or height attribute (such as 350px), and the project will take up a fixed space.
Equivalent of flex abbreviation
After understanding the meanings of the three attributes, we can look at the corresponding equivalents of the three attributes.
| grammar | equivalent |
|---|---|
| flex: initial | flex: 0 1 auto |
| flex: 0 | flex: 0 1 0% |
| flex: none | flex: 0 0 auto |
| flex: 1 | flex: 1 1 0% |
| flex: auto | flex: 1 1 auto |
flex: initial
Flex :initial is equivalent to setting flex: 0 1 auto, which is the default value for the Flex property.
For example, the outer container is red, and the inner element has a blue border, which is relatively small. It will have the following effect, and the remaining space is still reserved. The remaining space is available, but because the flex-grow property is 0, the space is not filled.
The code is as follows:
<div class="container">
<div class="item">Hey hey</div>
<div class="item">Ha ha</div>
</div>
<style>
.container {
width: 200px;
display: flex;
border: 2px dashed crimson;
}
.container .item {
border: 2px solid blue;
}
</style>
Copy the codeIf the subitems are too large, they shrink because of flex-shrink:1, and the effect is text wrap, as shown in the figure below.
Applicable scenario
‘initial’ indicates the initial value of the CSS property. It is usually used to restore the CSS property that has been set. Therefore, flex: INITIAL is not specified in daily development. Generally, the parent node is set to display: flex, and the child node is not set to flex: INITIAL. The Flex: Initial declaration applies to the layout effect shown below.
Layouts like the one shown above are common for buttons, titles, small ICONS, and other widgets because they are not very wide. Horizontal controls are often implemented using justify content and margin-left:auto/margin-right:auto.
In addition to the layout effect shown above, the Flex: Initial declaration also works with a two-column adaptive layout scenario where the content on one side is fixed width and the content on the other side is arbitrary width. The layout outline is shown below (dots represent text content).
At this point, you don’t need any other Flex layout-related CSS Settings, just the container element setting display: Flex.
Or you just want all the children under the parent to be side by side, without using the float property.
The diagram below:
To summarize, scenarios that want to shrink elements and have a large element content that can be wrapped automatically don’t need to do any Flex properties.
Flex: 0 and flex: none
Here are the differences and usage scenarios. Flex :0 is equivalent to setting flex:0 1 0%. Flex: None is equivalent to setting flex: 0 0 auto.
The code for Flex :0 is as follows
<div class="container">
<div class="item">Hey hey</div>
<div class="item">Ha ha</div>
</div>
<style>
.container {
width: 200px;
display: flex;
border: 2px dashed crimson;
}
.container .item {
border: 2px solid blue;
flex: 0;
}
</style>
Copy the codeFlex: None simply sets the Flex property in CSS to None and no longer shows the code. The effect is as follows:
In comparison, you can see that flex-0 will represent the minimum content width and will inflate the height (no height is currently set, if the height is set, the text will exceed the set height, as shown below). Flex-none will represent the maximum content width and will exceed the container width if the number of words is too large.
Application Scenario Flex-0
Since elements with Flex :0 are represented as minimal content widths, there are not many scenarios where Flex :0 is appropriate.
The rectangle on the left side of the image represents an image with variable text below it. Flex :0 is the appropriate setting for the left side so that the width of the left side is the width of the image regardless of the text content.
Application Scenario Flex-None
Flex-none is more applicable than Flex-0. For example, if the content text is fixed without newlines, flex-None applies to the width of the content. The code for flex-none is as follows:
<div class="aa">
<img src="a.png">
<p>Flex-none is not set for the right button</p>
<button>button</button>
</div>
<style>
.aa {
width: 300px;
border: 1px solid # 000;
display: flex;
}
.aa img {
width: 100px;
height: 100px;
}
.aa buttton {
height: 50px;
align-self: center;
}
</style>
Copy the code
Set flex-None to look like this:
Flex: 1 and flex: auto
Flex :1 is the same as setting flex:1 1 0%. Flex :auto is the same as setting flex: 1 1 auto.
See the difference in code representation:
In Flex :1, the code looks like this
<div class="container">
<div class="item">Hey hey hey hey hey hey hey hey</div>
<div class="item">Ha ha</div>
<div class="item">Ha ha</div>
</div>
<style>
.container {
width: 200px;
display: flex;
border: 2px dashed crimson;
}
.container .item {
border: 2px solid blue;
flex:1;
}
</style>
Copy the codeCharacterized by:
Flex-auto displays:
The two figures above show the difference between Flex :1 and Flex: Auto. Although both fully allocate container sizes, Flex :1 is more restrained (sacrificing its own size first) and Flex: Auto is more aggressive (expanding its own size first).
Suitable for scenarios using Flex :1
Flex :1 is used when you want an element to make full use of the remaining space without encroachment on the width of other elements, which is common in Flex layouts.
For example, all equally divided lists, or equally scaled lists, are suitable for using Flex :1 or other Flex values, and the appropriate layout outline is shown below.
Suitable for scenarios where flex: Auto is used
Flex: Auto is useful when you want elements to make full use of the remaining space, but each size is allocated according to its own content. Take the navigation bar. Set it to 200px overall and flex: Auto will automatically allocate the width according to the proportion of content.
conclusion
To sum up:
flex:initialRepresents the default Flex state, no setting required, suitable for the distributed layout of small control elements, or the dynamic layout of an item of content;flex:0It is suitable to set on the parent element of the replacement element.flex:noneWorks with fixed or small control elements, such as buttons, without newlines.flex:1Suitable for equal layout;flex:autoSuitable for content based dynamic adaptation layout;