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.
First post the code of the example:
html part:
<div> <div>1</div> <div>2</div> <div>3</div> </div>
.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; }
This is the sum of the width of each div multiplied by the flex-shrink coefficient.
div1最后的宽度 = 100px - 100*1/1400 * 100px = 92.86px div2最后的宽度 = 200px - 200*2/1400 * 100px = 171.42px div3最后的宽度 = 300px - 300*3/1400 * 100px = 235.72px
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!