On CSS display:flex;flex :grow, flex:shrink

The role of flex layout in development:

1. Solve the layout problems that need to be solved by positioning position, floating float and percentage%,
2. Solve the vertical align problem which is difficult to grasp before

It’s easy to come across a question in an interview

200px on the left, full screen on the right

In the previous way, we used to write a fixed 200px on the left, followed by the element margin- left:200px , and then add floating float. With flex, it’s very convenient to write

.left
    width 200px
.right
    flex 1

Automatically fill the remaining space, isn’t it special 6? Of course, this is a digression. What we need to learn is flex:grow , flex:shrink

flex: grow

MDN is described as follows:

CSSattributeflex-growA flex item is setMain dimensionsThe flex growth factor of. It specifies how much free space in the flex container should be allocated to the project (Flex growth factor).

How about it? Do you understand? I feel dizzy after reading it. I’d better have some chestnuts

section
    div.left
    div.center
    div.right

section
    display flex
    width 600px
    height 100px
    .left
        flex-grow 1
        width 100px
        background red
    .center
        flex-grow 2
        width 200px
        background yellow
    .right
        flex-grow 3
        width 16px
        background green

What will the chestnut look like in actual operation

Isn’t it interesting that the width is stretched according to a specific proportion, which is the function of flex: grow

• When the sum of flex growth of sub elements is greater than 1, the actual width should be calculated.
• First calculate the remaining width of the child element relative to the parent element, here is 600-100-200-16 = 284
• Calculate the actual width of the first square: 284 * 1 (Flex growth) / 6 (sum of flow growth of sub elements) + 100 (width of style definition) = 147.33. Try to calculate the second and third square by yourself

Another case of flex growth is that the sum of flow growth is less than 1. In this case, the algorithm is different from the above

Chestnut: let’s take the chestnut above and change the value of flow growth to 0.n

.left
    flex-grow 0.1
    width 100px
    background red
.center
    flex-grow 0.2
    width 200px
    background yellow
.right
    flex-grow 0.3
    width 16px
    background green

Try to think about what kind of layout you will get,
Look at the picture. I’ve put it down

When the sum of the flow growth of the child elements is less than 1, the parent element will have space not to be occupied. What is the actual width of the child element at this time

• When the sum of the flex growth of the sub elements is less than 1, the actual width is calculated.
• First calculate the remaining width of the child element relative to the parent element, here is 600-100-200-16 = 284
• Calculate the actual width of the first square: 284 * 0.1 (Flex growth) / 1 (sum of flow growth of sub elements) + 100 (width of style definition) = 128.4. Try to calculate the second and third square by yourself

Of course, the value of flex growth is affected by min / max width. You should pay attention to it when you use it

flex:shrink

CSS flex-shrinkProperty specifies the flex element’s shrink rule. Flex elements shrink only when the sum of the default widths is greater than the container, and the shrinkage is based on the value of flex shrink.

Also attach MDN about flex:shrink Description of.. ha-ha

flex:grow It’s stretching to fill in the void, then flex:shrink In other words, the width of the child element is larger than that of the parent element

Let’s also have a chestnut:
Still use the above code, but we have to modify the CSS

.left
    flex-shrink 1
    width 200px
    background red
.center
    flex-shrink 2
    width 300px
    background yellow
.right
    flex-shrink 3
    width 160px
    background green

I believe you have found that, yes, 200 + 300 + 160 = 660, which is beyond the 600 width of the parent container

Let’s take a picture~

How about shrinking according to a certain proportion? Isn’t it amazing~

flex:shrink With flex:grow There are some differences between the two algorithms. Here are some values to be noted (overflow value, total width)

• First calculate the overflow value of the sub element 200 + 300 + 160-600 = 60.
• Then calculate the total width of the child elements, 2001+3002+160*3=1280
• Calculate the actual width of the first square: 200 – 601(flex-shrink)200 (width) / 1280 = 190.62, try to calculate the second and the third

Is this algorithm a little difficult to understand? In fact, the total width is flex:shrink As a share, the sub elements are each share, and each * share is added to calculate the total width. Then, the share of overflow value in each sub element is calculated, and the actual width is obtained by subtracting the overflow share from the actual width of the sub element~

Yes, of course, flex:shrink There are also cases that are less than 1. If the shrink is greater than 1, it will be exactly the same as the total width after reduction. What will happen if it is less than 1

It’s coming. It’s coming. He’s coming,

If the value is less than 1, the sub elements will not be scaled sufficiently and will still extend to the outside of the container

194.38 + 283.12 + 146.5 = 624, how about it? Although the child element still shrinks at this time, it is still larger than the 600 of the parent container, isn’t it amazing

Then, how to calculate the actual width at this time

• First calculate the overflow value of the sub element 200 + 300 + 160-600 = 60
• At this time, the overflow value can’t be calculated directly, because the sum of the flex shrink of the sub elements is not 1, only 0.6. At this time, the overflow value should be calculated with 60 * 0.6 = 36
• Then calculate the total width of the child elements, 2000.1+3000.2+160*0.3=128
• Calculate the actual width of the first square: 200 – 360.1(flex-shrink)200 (width) / 128 = 194.38, try to calculate the second and the third

Of course, flex shrink is also affected by Max / min width

That’s the end. You can write a demo according to your understanding to deepen your memory. Thank you

Code farm advanced question bank, an interview question every day or JS knowledgehttps://www.javascriptc.com/interview-tips/

❤️ After two small things

If you think this article is very enlightening to you, I’d like to ask you to do me two small favors:

Share this article with your friends / communication group, let more people see, progress together, grow together!

Pay attention to the official account “It pingtouge AllianceThe official account replied back to “resourcesFree access to my carefully organized front-end advanced resource tutorial

JS Chinese net – front end advanced resource tutorialwww.javascriptC.com
A platform dedicated to helping developers change the world with code, where you can find the headlines of the technology world every day