How is flex-shrink calculated? Introduction to the calculation method of flex-shrink

The content of this article is about how to calculate flex-shrink? The introduction to the calculation method of flex-shrink has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Let’s review flex-grow

Suppose there is a div containing three sub-div1, div2, div3, with widths of 200px respectively.
For flex-grow, I believe those who have used flex layout are very familiar with the calculation of the remaining space allocation ratio. Here is a simple calculation formula:
Assume that the flex-grow of div1, div2, and div3 are set to 1, 2, and 3 respectively. Now assume that the width of the outer div is 800px, then the remaining 800px - 3*200px = How to allocate 200px to three child divs?
The additional space allocated for the three divs is as follows:

div1: 1 / (1 2 3) 200px = 1/6 200px

div2: 2 / (1 2 3) 200px = 2/6 200px

div3: 3 / (1 2 3) 200px = 3/6 200px

##Key points Come on, how is flex-shink calculated?

The flex-shink attribute is mainly used to shrink the sub-div by a certain amount of space to offset the insufficient width when the outer div is not wide enough.

For example, the width of the three sub-divs is now 600px, but I set the width of the outer div to 500px, so how can I make the sub-divs shrink by 100px if the 600-500 px is not enough to be displayed. At this time, flex-shrink comes in handy. How to calculate it specifically?
Some people say that this attribute is similar to flex-grow, and the calculation method is similar (actually there are differences). But how to calculate it specifically, many people can't tell clearly, including MDN and W3CShcool, who didn't give a specific formula. In addition, I found that the calculation formula given by many articles with a lot of likes is wrong. This is why I want to write this article.

Okay, without further ado, let’s talk about how to calculate the shrinkage space!

First post the code of the example:
html part:

<div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

css part:

.outer {
  width: 500px;
  display: flex;
}
.outer div {
  height: 80px;
}

.div1 {
  flex: 1 1 100px;
  background: red;
}
.div2 {
  flex: 1 2 200px;
  background: yellow;
}
.div3 {
  flex: 1 3 300px;
  background: green;
}

First calculate the total weight TW = 100px 1(flex-shrink) 200px 2(flex -shrink) 300px *3(flex-shrink) = 1400px

This is the sum of the width of each div multiplied by the flex-shrink coefficient.

The shrinkage space of each div is: the width of the div flex-shrink coefficient / the total weight TW the total width that needs to be shrunk (in our example it is 600px - 500px = 100px)

So The final width calculation formula of each div is as follows:

div1最后的宽度 = 100px - 100*1/1400 * 100px = 92.86px

div2最后的宽度 = 200px - 200*2/1400 * 100px = 171.42px

div3最后的宽度 = 300px - 300*3/1400 * 100px = 235.72px

demo address: https://jsfiddle.net/lingzhen...

The screenshot is as follows:

Tips: When you see some formulas in other people’s articles, don’t be lazy. Write an example to verify it yourself. Otherwise, you may have been misled, but you will like it and add it to your collection. After all, practice brings true knowledge!

BTW: This attribute is indeed rarely used compared to flex-grow, so many people have not studied how it is calculated.

The above is the detailed content of How is flex-shrink calculated? Introduction to the calculation method of flex-shrink. For more information, please follow other related articles on the PHP Chinese website!