About css display: flex; flex: grow, flex: shrink

Posted Jun 28, 20205 min read

The role of flex layout in development:

  1. Solve the layout problem that needs to be solved with positioning position, floating float, and%%,
  2. Solve the problem of vertical centering that was difficult to grasp before

It is easy to encounter a question during the interview:

200px on the left, full screen on the right

The previous writing method will use the left to write fixed 200px, and the element behind margin-left:200px, and then add a floating float, after flex, it is very convenient to write

.left
    width 200px
.right
    flex 1

Automatically fill up the remaining space, is it special 6, of course, this is an off-topic, what we have to learn is flex:grow,flex:shrink

flex:grow

MDN is described like this:

CSS property flex-grow sets a flex item [main size][ https://www.w3.org/TR/css-flexbox/#main-size ) flex growth factor. It specifies how much of the remaining space in the flex container should be allocated to the item(flex growth factor).

How about it, understand? I m dizzy after reading it myself. Let s get 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 happen to the chestnut above in actual operation?

image.png

Isn't it a bit interesting, the width is stretched at a specific ratio, this is the effect of our flex:grow

  • When the flex-grow of the child elements adds up to 1, the actual width must be calculated.
  • First calculate the remaining width of the child element relative to the parent element, in this case 600-100-200-16=284
  • Calculate the actual width of the first square:284*1(flex-grow)/6(summary of flow-grow of child elements) +100(width of style definition) = 147.33, the second and third may try it yourself Calculate

Another case of flex-grow is when the sum of flow-grow is less than 1. At this time, the algorithm is different from the above:

Chestnuts:Let s take the chestnuts above and change the value of flow-grow to 0.n, corresponding to

.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 have put it below

image.png

When the flow-grow of the child elements adds up to less than 1, at this time, the parent element will have no space to fill up, so what is the actual width of the child element at this time:

  • When the flex-grow of the child elements adds up to less than 1, the actual width must be calculated.
  • First calculate the remaining width of the child element relative to the parent element, in this case 600-100-200-16=284
  • Calculate the actual width of the first square:284*0.1(flex-grow)/1(sum of child flow-grow) +100(width of style definition)=128.4, the second and third may try it yourself Calculate

Of course, the value of this flex-grow is affected by min/max-width, you should pay attention when you actually use it

flex:shrink

CSS flex-shrink attribute specifies the contraction rules of flex elements. The flex element shrinks only when the sum of the default widths is greater than the container, and the contracted size is based on the value of flex-shrink.

Also attach MDN's description of flex:shrink. . Haha

flex:grow is stretching to fill the gap, then flex:shrink is opposite, it will shrink, that is, the width of the child element is greater than the width of the parent element

We also come to 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 it smart, yes, 200+300+160=660, this value has exceeded the width of 600 of the parent container, this time, what will it look like in actual operation:

Still come to the picture~

image.png

How about shrinking by a certain percentage, isn t it amazing~

The algorithm of flex:shrink and flex:grow still has some differences. Here are a few values to note(overflow value, total width):

  • First calculate the overflow value of the child element 200+300+160-600=60.
  • Then calculate the total width of the child elements, 200_1+300_2+160*3=1280
  • Calculate the actual width of the first square:200-60_1(flex-shrink)_200(width)/1280=190.62, the second and third may try to calculate by yourself

Isn't this algorithm a bit difficult to understand? In fact, the total width is to take flex:shrink as a share, and the child elements are each share, and each share of the * share is added together, so that the total width is calculated; and then calculated The share of the overflow value in each child element, and then subtract the overflow share from the actual width of the child element to get the actual width~

Of course, flex:shrink may also be less than 1. Under consideration, if shrink is greater than 1, it will be exactly equal to the total width after shrinking; then what will happen if it is less than 1.

He came, he came,

If it is less than 1, the child element cannot get a sufficient reduction ratio, and it will still extend to the outside of the container

image.png

194.38 + 283.12 + 146.5 = 624, how about, although the child element is still shrinking at this time, it is still greater than 600 of the parent container, magical

So, how is the actual width calculated at this time:

  • First calculate the overflow value of the child element 200+300+160-600=60
  • At this time, the overflow value cannot be directly calculated, because the sum of the flex-shrink of the child element does not have 1, only 0.6, and the overflow value at this time should be calculated using 60*0.6=36
  • Then calculate the total width of the child elements, 200_0.1+300_0.2+160*0.3=128
  • Calculate the actual width of the first square:200-36_0.1(flex-shrink)_200(width)/128=194.38, the second and third may try to calculate by yourself

Of course, flex-shrink will also be affected by max/min-width

This is the end, you can write a demo based on your understanding to deepen your memory, thank you

Advanced question bank for code farmers, one interview question or Js tips every day https://www.javascriptc.com/interview-tips/

After reading two small things

If you think this article is very inspiring for you, I would like to ask you to do me a little favor:

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

Pay attention to the public account "IT flat-headed brother alliance", the public account background reply "resources" Free to receive my carefully organized front-end advanced resource tutorial

JS Chinese Network-Advanced Resource Tutorial www.javascriptC.com
A platform dedicated to helping developers use code to change the world as their mission, you can find the headlines of the technical world here every day
![JS - Front-end advanced resource tutorials, to understand the front-end frontier, focus on IT flat-head brother alliance](https://i0.wp.com/segmentfault.comhttps://image-static.segmentfault.com/321 /499/3214997250-ad554e805a62dcfa_articlex "JS Chinese Network-Advanced Front-end Resource Tutorial, appreciate the front-end frontier, pay attention to the IT flat-headed alliance")