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

Time：2021-4-8

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:

CSSattribute`flex-grow`A 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-shrink`Property 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

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