twitter

With Flex layouts, it’s easy to implement even more complex layouts like float, Position. This article does not cover the basics of Flex usage. If you are not familiar with Flex, this article is your first choice to get involved with Flex.

Elements with a Flex layout are called Flex containers, or “containers” for short. All of its child elements automatically become container members and are called Flex items, or “items.”

First, the Flex layout occurs between parent and child elements, and the parent container needs to declare display: flex; Make it a Flex container, and the child elements then plan the space in the parent container based on their attributes.

Grow with remaining space

The Flex-Grow property defines the project’s zoom scale, which defaults to 0, or no zoom if there is free space.

What is surplus space? A Flex container contains a horizontal left to right spindle and a vertical cross axis from top to bottom. The remaining space is how much space is left in the parent container along the main axis that is not occupied by the item.

For example

<div class="container">
  <span class="B1"></span>
  <span class="B2"></span>
  <span class="B3"></span>
</div>
Copy the code

Container is a Flex Container, B1, B2, B3; if the width of the former is 500px and the latter is 100px, then the remaining space = 500px-300px. It’s as clear as that.

Flex-grow is easy to understand. A project that allocates this property is claiming free space. The default is 0, meaning that it does not claim free space at all. Suppose we set flex-grow: 1 for B1; , then B1 gobbles up the remaining 200px and becomes a 300px big project. Flex: 2; , so it means that B2 also participates in the partition of the remaining space, and it occupies two parts of the remaining space. Then the parent container will divide the remaining space into three parts, and then give one part to B1 and two parts to B2, as follows:

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. The default value is auto, the original size of the project, usually px.

To be honest, I didn’t quite understand what it meant.

In fact, this property value is used as a substitute for width. If the project has flex-basis or Width set, they reserve this amount of space with the parent container before planning the space, and the parent container allocates the remaining space to the container with Flex-grow.

Note that if you set both flex-basis and width, the width property is overridden, meaning that flex-basis takes precedence over width. It is important to note that if either flex-basis or width is auto, the non-auto attribute takes precedence.

In addition, flex-basis and width are auto values, so the final space is determined by the amount of content, and more content takes up more horizontal space.

shrink

All right, so much for that, I think you get the point. One might think, well, that’s it, that’s easy, isn’t the core the allocation of the remaining space?

Yes, the core of ** is how the remaining space is allocated. ** But is there anything else about the arrangement of items in the parent container? As you can see, the sum of the widths of B1, B2, and B3 in the above examples does not exceed the width of the parent container. What if the width of three child containers adds up to more than the width of the parent container? Is there any space left to allocate, and what does the browser do with that?

Note that the Flex environment does not wrap lines by default, even if the parent container is not wide enough, unless flex-wrap is set to wrap lines.

Click to see the sample code

In this case, we can see that the flex-grow set by B1 does not work, not only does it not get the remaining space, but its space is even smaller than the 300px space defined by B1, and we can see that the space of B2 and B3 is also compressed accordingly. The question here is: 1. Why does flex-grow not work and instead is compressed? 2. What is the compression ratio of the three containers?

This is the focus of this section, 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.

Why doesn’t Flex-grow work?

Again, the three containers are in the Flex environment, so the parent container still calculates the remaining space before layout. The result of this calculation is: free space = 500px-300px-160px-120px = -80px, free space is a negative number so it is easy to understand the first problem. Even with flex-grow set, there is no free space, so B1 allocates 0 space.

What is the compression ratio of the three containers?

Since the width of the parent container in the Flex environment does not change at 500px, there are only two ways to make the child and at most the width of the parent container: the first is to wrap the child container, and the second is to compress the child container to fit the parent container. Because flex child containers are non-newline by default, we won’t discuss them here. The second type of compression, in fact, is the style shown in the above example. Now we have the second question above, what is the compression ratio of these three, and how much space does each need to compress?

This is where flex-shrink comes in. This property defines the compression ratio of a subcontainer. Its default value is 1, so in the example above, the compression ratio of the three child containers is the same 1:1:1. What if at this point we set the compression ratio of B1 to 2?

Click to see the sample code

We can see that B1 is being compressed even more. B2 and B3 get more space. So how do we figure out their respective compression rates? If we assume that the compressibility of B2 and B3 is X1, then the compressibility of B1 is X2, then we have the following equation:

X2 = 2 * X1;
500 = 300 * X2 + 160 * X1 + 120 * X1;
Copy the code

conclusion

< span style = “box-sizing: border-box; word-wrap: break-word! Important;” 2. If the parent container does not have enough space, shrink flex-grow; otherwise, expand flex-grow. 3. If you want a container not to be compressed at all times, set flex-shrink to 0. 4, If the child’s flex-basis is set to 0(width is ok, but more semantic), then the child will not be allocated space when calculating the remaining space. 5, if the child’s flex-basis is set to auto(width is fine, but flex-basis is more semantic), then the remaining space will be calculated according to the content of the child.