Example analysis of flex-shrink, a CSS flexible box model attribute (picture)

Last time, we have learned about the specific usage of flex-grow. This week, let us take a look at the property of flex-basis. flex-shrink

Define the project The reduction ratio, the default value is 1, please note that the premise is that the project is reduced when there is insufficient space. A value of 0 means no reduction.

The following example does not define this property, but if there is insufficient space in the container, the project will be reduced by default.


When the flex-grow ratio of items 1,2,3,4,5 changes to:




Calculation The process is as follows (we ignore the size of the border here to facilitate calculation):
The sum of the width of the entire box 400px item is 100+100+100+100+100=500px, and the excess space is 500-400px =100px, then in the example, item 1 is not reduced, item 2 is reduced by 1, item 3 is reduced by 2, item 4 is reduced by 3, and item 5 is not reduced. Then the excess 100px will be digested by 2, 3, 4, and the ratio is 1:2:3. So how do we calculate this?

The first is to multiply the wdith value of each item by the flex-shrink value,
2: (100 * 1) = 100
3: (100 * 2) = 200
4: (100 * 3) = 300
Then sum the products of all the items.
(100 + 200 + 300) =600
After obtaining the ratio, it must be multiplied by the space to be exceeded.
A: (100 / 600) * 100 = 16.66
B: (200 / 600) * 100 = 33.33
C: (300 / 600) * 100 = 50
Get every requirement The remaining space after subtracting the reduced space
A: (100 – 16.66) = 83.34
B: (100 – 33.33) = 66.67
C: (100 – 50) = 50
Okay, This will give you the calculated width.

The above is the detailed content of Example analysis of flex-shrink, a CSS flexible box model attribute (picture). For more information, please follow other related articles on the PHP Chinese website!