On flex layout and scale calculation

Time:2021-4-4

1、 Introduction to flex layout

Flex is the abbreviation of flexible box, which means “flexible layout”, and is used to provide the maximum flexibility for the box model.

Any container can be specified as flex layout, that is to say, elements in the row can also be set as flex layout.

//Set the block level element div to flex layout
div {
    display: flex;
}
//Set the in line element span to flex layout
span {
    display: flex;
}

The elements with flex layout are called flex containers, or “containers” for short. All its child elements automatically become members of the container, which is called flex item, or “project” for short.

2、 Default features of flex layout

By default, all the child elements in the container will be arranged horizontally, similar to forcing a left float, so the float and clear attributes of the child elements in the container will be invalid. At the same time, the alignment of child elements in the container will not be controlled by vertical align, that is, vertical align will also be invalid.

<style>
#main{
    width:800px;
    height:300px;
    display:flex;
    font-size: 20px;
    background: red;
}
</style>

<div id="main">
  <div style="background- color:coral; "Class =" item-1 "> Red < / div >
  <div style="background- color:lightblue; "Class =" item-2 "> Blue < / div >  
  <div style="background- color:lightgreen; "Class =" item-3 "> green with more content < / div >
</div>

① If the vertical alignment of the container is not set and the height of the container’s sub elements is not set, the height of the container’s sub elements is the same as that of the container. As above, the height of all the sub elements in the container will be changed to 300px.

② By default, the width of the child elements under the container will not be enlarged automatically, that is, the actual width of the element itself will be displayed by default. As shown in the figure:

③ By default, the width of the child elements under the container can be reduced. When the sum of the widths of all the child elements in the container exceeds the width of the container, it will not be displayed in a new line by default. Therefore, the width of the child elements of the container needs to be reduced to ensure that the container can hold all the child elements. However, the width of the container’s sub elements is not infinitely reduced, that is, it can’t be reduced.


.item-1 {
    width: 200px;
}
.item-2 {
    width: 8800px;
}
.item-3 {
    width: 8800px;
}

For example, the widths of Item2 and Item3 are set to 8800px, and the sum of the widths of all the child elements in the container is 17800px, which is far beyond the width of 800px. Therefore, all the child elements in the container must be compressed proportionally, and the width of Item1 element should be 200-191.01= The width of pm120itex is just the minimum size of p998.

④ By default, the child elements in the container can be compressed to the minimum, but when all the child elements cannot be placed after the compression to the minimum, the child elements will be placed outside the container.

⑤ If you add a vertical alignment to the container, the height of all the child elements in the container will become the actual height and will not be equal to the height of the container.

#main{
    width:800px;
    height:300px;
    display:flex;
    font-size: 20px;
    background: red;
    Align items: Flex start; / * add vertical alignment*/
}

3、 Container property settings

By default, the container has two axes: a horizontal main axis and a vertical cross axis. It is mainly to set the main axis direction of the container, whether to wrap after exceeding the container, horizontal alignment and vertical alignment.

① Flex direction: used to set the direction of the main axis. The default value is row, that is, all the sub elements in the container are arranged horizontally.

Column: indicates that all child elements in the container are arranged vertically.

Row reverse: indicates to reverse the order of all child elements in the container, and the starting point is right, that is, right aligned.

Column reverse: it means to reverse the order of all the child elements in the container, and the starting point is lower, that is, it is aligned at the bottom of the container.

② Flex Wrap: used to set whether to wrap a line when the container’s sub elements cannot be placed. The default value is nowrap, that is, do not wrap lines, even if they cannot be put down.

Wrap: indicates that the line can be wrapped. When wrap is set to wrap, the elements in the container will not be compressed, but will be wrapped.

#main {
    width:800px;
    height:300px;
    display:flex;
    background: red;
    Flex Wrap: wrap; / * when you can't put it down, you can wrap it*/
    font-size: 20px;
}
.item-1 {
    width: 300px;
}
.item-2 {
    width: 300px;
}
.item-3 {
    width: 300px;
}

Wrap reverse: indicates that the row order is reversed after the newline display.

wrap:

wrap-reverse:

③ Flex flow: short for the flex direction attribute and flex wrap attribute. The default value is row nowrap, that is, the main axis is horizontal and does not wrap.

④ Justify content: used to set the alignment of the spindle direction.

⑤ Align items: used to set the alignment of items on the cross axis (non spindle).

4、 Element (item) attribute setting in container

① Order: used to set the order of container elements. The default value is 0. The smaller the value is, the higher the order is.

.item-2 {
    Order: - 1; / * set the order of item-2 to - 1 to make item-2 rank first*/
}

② Flex growth: used to set the magnification of container elements. The default value is 0, that is, if there is space left, it will not be enlarged.

③ Flex shrink: used to set the reduction ratio of container elements. The default value is 1, that is, if there is not enough space, the project will be reduced.

④ Flex basis: used to set the size of container elements. The default value is auto, which is consistent with the actual size of container elements. When scaling, it will calculate whether there is extra scaling space according to this value.

⑤ Flex: short for flex grow, flex shrink, and flex basis. The default value is 0.1 auto, that is, it can’t be enlarged or reduced, and its size is the same as that of the container element. The last two attributes are optional.

.item-2 {
    Flex: 0 1 Auto; / * note that the space between the three values is two, not a comma*/
}

⑥ Align self: used to set the alignment of a container element separately. The default value is auto, which means to inherit the alignment of the parent element.

.item-2 {
    Align self: Center; / * set the item-2 center alignment separately*/
}

5 felx:1 The difference between flex and auto

As can be seen from the above, the default value of flex is 0.1 auto. The value of flex is flexible, and many kinds of values can be set, such as:
① None: This is equal to 0 0 auto.

.item {
    Flex: none; // the value is none
}
//Equivalent to
.item {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: auto;
}

② Auto: This is equal to 1 auto.

.item {
    Flex: Auto; // the value is auto
}
//Equivalent to
.item {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: auto;
}

③ A non negative number: in this case, the non negative number refers to the value of flex growth. The default value of flex shrink is 1, but the value of flex basis is 0%

.item {
    Flex: 1; // the value is a non negative number
}
//Equivalent to
.item {
    flex-grow: 1;
    flex-shrink: 1;
    Flex basis: 0%; / * here is special, 0%*/
}

④ The value is two non negative numbers: at this time, it represents the value of flex growth and flex shrink respectively, and the value of flex basis is 0%.

.item {
    Flex: 6, 8; // the value is two non negative numbers
}
//Equivalent to
.item {
    flex-grow: 6;
    flex-shrink: 8;
    Flex basis: 0%; / * here is special, 0%*/
}

⑤ A length or percentage: in this case, the value is flex basis, the value of flex growth is 1, and the value of flex shrink is 1

.item {
    Flex: 200px; // the value is a pixel value
}
//Equivalent to
.item {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 200px;
}
.item {
    Flex: 100%; // the value is a percentage
}
//Equivalent to
.item {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 100%;
}

It should be noted that if flex basis is set to percentage, it is relative to the percentage of the size of the container, not the percentage of its own size.

It can be seen from the above that when the value of flex is none or auto or not set, the value of flex basis is auto; in other cases, such as when the value of flex is a number, the value of flex basis is 0%.

So the difference between flex: 1 and flex: Auto is that the value of flex basis is different, flex:1 When flex: Auto, the value of flex basis is 0%; when flex: Auto, the value of flex basis is auto.

6、 Calculation of enlarging or reducing value of container element

① Zoom in
It is mainly to calculate whether there is residual space in the container according to the value of flex basis. If there is residual space and a certain sub element in the container can be enlarged, then the amplification factor of the sub element in the container can be calculated by using the sum of the flex growth value of the sub element compared with the flex growth value of all the sub elements in the container, and then multiplied by the size of the residual space, that is, the sub element of the container needs to be enlarged Large pixel value.

#main{
    width:800px;
    height:300px;
    display:flex;
    background: red;
    font-size: 20px;
}
.item-1 {
    width: 200px;
    flex: 2 1 auto;
}
.item-2 {
    width: 200px;
    Flex: 3 1 10%; / * here the flex basis value is equivalent to 80px*/
}
.item-3 {
    width: 100px;
    flex: 0 1 220px;
}

The flex basis of itme-1 is auto, so the value is consistent with the size of the element itself, that is, 200px;
The flex basis of item-2 is 10%, which is relative to the size of the container itself, namely 800px * 10% = 80px;
The flex basis of item-3 is set to 220px. It should be noted that although the width is set to 100px, the width will not work and will still be based on flex basis.
Firstly, according to flex basis, the remaining space is calculated as 800px – (200px + 80px + 220px) = 300px;
Because the remaining space is 300px > 0, the child elements in the container can be enlarged. Because the flex growth value of item-3 is 0, item-3 will not be enlarged and will still be displayed in 220px.
The amplification value of item-1 = 2 / (2 + 3) * 300px = 120px;
The amplification value of item-2 = 3 / (2 + 3) * 300px = 180px;
Therefore, the size of final item-1 = 200px + 120px = 320px;
The size of item-2 = 80px + 180px = 260px;
The size of item-3 is 220px;

② Shrinking situation
In the case of scaling down, we first calculate how much space the container exceeds the container according to the value of flex basis. However, we do not simply calculate the scaling ratio according to the value of flex shrink, but calculate the scaling ratio according to the sum of the value of flex basis multiplied by the value of flex shrink of an element in the container and the value of flex basis multiplied by the value of flex shrink of all the elements in the container.

#main{
    width:800px;
    height:300px;
    display:flex;
    background: red;
    font-size: 20px;
}
.item-1 {
    width: 200px;
    flex: 0 2 auto;
}
.item-2 {
    width: 200px;
    Flex: 0 3 100%; / * here the flex basis value is equivalent to 800px*/
}
.item-3 {
    width: 100px;
    flex: 0 0 200px;
}

The flex basis of itme-1 is auto, so the value is consistent with the size of the element itself, that is, 200px;
The relative size of the container is pbasitem * 8002-800x, which is 100%;
The flex basis of item-3 is set to 200px. It should be noted that although the width is set to 100px, the width will not work and will still be based on flex basis.
Firstly, according to flex basis, the excess space = (200px + 800px + 200px) – 800px = 400px is calculated;
Because the excess space is 400px > 0, the child elements in the container need to be reduced. Because the flex shrink value of item-3 is 0, item-3 will not be reduced and will still be displayed in 200px.
Reduction value of item-1 = (2200px / (2 200px + 3 800px + 0 200px)) * 400px = 57.14px;
Reduction value of item-2 = (3800px / (2 200px + 3 800px + 0 200px)) * 400px = 342.86px;
Therefore, the size of final item-1 = 200px – 57.14px = 142.86px;
The size of item-2 = 800px – 342.86px = 457.14px;
The size of item-3 = 200px;

This article about flex layout and scaling calculation is introduced here. For more related flex layout and scaling content, please search previous articles of developer or continue to browse the following related articles. I hope you can support developer more in the future!