A brief discussion on Flex layout and scaling calculation

1. Introduction to Flex Layout

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

Any container can be specified as a Flex layout, that is, inline elements can also be set to a Flex layout.

// Set the block-level element div to flex layout div {
    display: flex;
}

// Set the inline element span to the flex layout span {
    display: flex;
}

Elements that use Flex layout are called Flex containers, or "containers" for short. All its child elements automatically become container members, called Flex items, or "items" for short.

2. Default characteristics of Flex layout

By default, all child elements in the container will be arranged horizontally, similar to forcing a left float, so the float and clear properties of the container child elements will be invalid. At the same time, the alignment of the 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 the height of the container. As shown above, the height of all sub-elements in the container will become 300px.

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

③ By default, the width of the sub-elements under the container can be reduced. When the sum of the widths of all the sub-elements in the container exceeds the width of the container, they will not wrap by default. In this case, you need to reduce the width of the container sub-elements to ensure that the container can accommodate all the sub-elements. However, the width of the container child element cannot be reduced infinitely, that is, it cannot be reduced any further.

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

For example, above, the width of item2 and item3 is set to 8800px, and the total width of all sub-elements in the container is 17800px, which far exceeds the width of the container of 800px. Therefore, all sub-elements in the container must be compressed proportionally. The width of the item1 element should be 200 - 191.01 = 8.99px, and item1 is compressed to the minimum width required to store a word, which is exactly equal to the font size, that is, 20px, so the width of item1 will become 20px.

④ By default, the sub-elements in the container can be compressed to the minimum, but if all the sub-elements cannot be placed after being compressed to the minimum, the sub-elements will be placed outside the container.

⑤ If you add a vertical alignment to the container, the height of all child elements in the container will become the actual height and will not be the same height as 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, a container has two axes: the horizontal main axis and the vertical cross axis. The main thing is 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, which means that all sub-elements in the container are arranged horizontally.

column: Indicates that all child elements in the container are arranged vertically.

row-reverse: means reversing the order of all child elements in the container, and the starting point is on the right, that is, right-aligned.

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

② flex-wrap: used to set whether to wrap when the child elements in the container cannot fit. The default value is nowrap, which means no line break, even if the text cannot fit.

wrap: Indicates that lines can be wrapped. When set to wrap, the elements in the container will not be compressed, but will be displayed in wrapped form.

#main {
    width:800px;
    height:300px;
    display:flex;
    background: red;
    flex-wrap: wrap; /*Wrap when there is no space*/
    font-size: 20px;
}
.item-1 {
    width: 300px;
}
.item-2 {
    width: 300px;
}
.item-3 {
    width: 300px;
} 

wrap-reverse: Indicates that the order of lines is reversed after line wrapping.

wrap:

wrap-reverse:

③ flex-flow: It is an abbreviation of the flex-direction attribute and the flex-wrap attribute. The default value is row nowrap, that is, the main axis is horizontal and there is no line break.

④ justify-content: used to set the alignment of the main axis direction.

⑤ align-items: used to set the alignment of items on the cross axis (non-main axis).

4. Setting the attributes of elements (items) in containers

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

.item-2 {
    order: -1; /*Set the order of item-2 to -1 to put item-2 in the front*/
} 

② flex-grow: used to set the enlargement ratio of the container element. The default value is 0, that is, if there is remaining space, it will not be enlarged.

③ flex-shrink: used to set the shrinkage ratio of the container element. The default value is 1, which means that if there is insufficient space, the item will shrink.

④ flex-basis: used to set the size of the container element. The default value is auto, which is consistent with the actual size of the container element. When scaling, this value will be used to calculate whether there is extra scaling space.

⑤ flex: It is the abbreviation of flex-grow, flex-shrink and flex-basis. The default value is 0 1 auto, which means it cannot be enlarged but can be shrunk, and the size is consistent with the size of the container element. The last two attributes are optional.

.item-2 {
    flex: 0 1 auto;/*Note that there is a space between the three values, not a comma*/
}

⑥ align-self: used to set the alignment of a container element individually. The default value is auto, which means inheriting the alignment of the parent element.

.item-2 {
    align-self: center;/*Set item-2 to center alignment*/
} 

5. The difference between felx:1 and flex: auto

From the above, we can see that the default value of flex is 0 1 auto. The value of flex is relatively flexible and can be set to many values, such as:
① none: At this time it is equal to 0 0 auto.

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

② auto: At this time it is equal to 1 1 auto.

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

③ A non-negative number: In this case, this non-negative number refers to the value of flex-grow, flex-shrink uses the default value of 1, but the flex-basis value is 0%, such as:

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

④ The values ​​are two non-negative numbers: they represent the values ​​of flex-grow 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%; /*This is special, 0%*/
}

⑤ A length or percentage: In this case, this value is the value of flex-basis, flex-grow is 1, and flex-shrink is 1

.item {
    flex: 200px; // 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 a percentage, then it is relative to the percentage of the container's size, not the percentage of its own size.

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

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

6. Calculation of enlargement or reduction value of container elements

① In the case of enlargement, it is mainly to calculate whether there is remaining space in the container based on the value of flex-basis. If there is remaining space and a child element in the container can be enlarged, then the enlargement coefficient of the container child element is calculated by dividing the flex-grow value of the child element by the sum of the flex-grow values ​​of all child elements in the container, and then multiplying it by the size of the remaining space is the pixel value that the container child element needs to be enlarged.

#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%;/*The flex-basis value here is equivalent to 80px*/
}
.item-3 {
    width: 100px;
    flex: 0 1 220px;
}

itme-1's flex-basis is auto, so the value is the same as the element itself, which is 200px;
The flex-basis of item-2 is 10%, which is relative to the size of the container itself, that is, 800px * 10% = 80px;
The flex-basis of item-3 is set to 220px. It should be noted here that although the width is set to 100px, the width will not have any effect and will still be based on the flex-basis.
First, according to flex-basis, the remaining space is calculated = 800px - (200px + 80px + 220px) = 300px;
Since the remaining space is 300px > 0, the child elements in the container can be enlarged. Since the flex-grow value of item-3 is 0, item-3 will not be enlarged and will still be displayed at 220px.
Item-1's zoom value = 2 / (2 + 3) * 300px = 120px;
Item-2's zoom value = 3 / (2 + 3) * 300px = 180px;
So, the final size of item-1 = 200px + 120px = 320px;
item-2's size = 80px + 180px = 260px;
item-3's size = 220px;

② In the case of shrinking, the amount of space that the container exceeds the container is also calculated based on the flex-basis value. However, the scaling ratio is not simply calculated based on the flex-shrink value. Instead, the scaling ratio is calculated based on the flex-basis value of an element in the container multiplied by the flex-shrink value and the sum of the flex-basis value of all child elements in the container multiplied by the flex-shrink value.

#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%;/*The flex-basis value here is equivalent to 800px*/
}
.item-3 {
    width: 100px;
    flex: 0 0 200px;
}

itme-1's flex-basis is auto, so the value is the same as the element itself, which is 200px;
The flex-basis of item-2 is 100%, which is relative to the size of the container itself, that is, 800px * 100% = 800px;
The flex-basis of item-3 is set to 200px. It should be noted here that although the width is set to 100px, the width will not have any effect and will still be based on the flex-basis.
First, according to flex-basis, the excess space is calculated = (200px + 800px + 200px) - 800px = 400px;
Since the excess space is 400px > 0, the child elements in the container need to shrink. Since the flex-shrink value of item-3 is 0, item-3 will not shrink and will still be displayed at 200px.
Item-1's reduced value = (2 200px / (2 200px + 3 800px + 0 200px)) * 400px = 57.14px;
The reduced value of item-2 = (3 800px / (2 200px + 3 800px + 0 200px)) * 400px = 342.86px;
So, the final size of item-1 = 200px - 57.14px = 142.86px;
item-2's size = 800px - 342.86px = 457.14px;
item-3's size = 200px;

This is the end of this article about Flex layout and scaling ratio calculation. For more relevant Flex layout and scaling ratio content, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future!