An example analysis of the flex-shrink of CSS Elastic box model properties

Last time we had a look at the specific usage of flex-grow, this week, let's see flex-basis this property. Flex-shrink

Define the scaling of the project, with the default value of 1, and note that the project shrinks if there is insufficient space. The value is 0 and does not shrink.

The attribute is not defined in the following example, but the project shrinks by default if there is insufficient space in the container.


When the flex-grow ratio of the project 1,2,3,4,5 is changed to:




The calculation process is as follows (we ignore the size of the border in order to calculate it):
The width of the whole box of 400px project width is 100+100+100+100+100=500px, the space exceeded is 500-400px=100px, then the example of Project 1 does not shrink, Project 2 is reduced to 1, project 3 is reduced by 2, Project 4 was scaled down by 3, and project 5 did not shrink. Then the 100px will be 2, 3, 4 digestion, the proportion is 1:2:3. So how do we calculate it?

The first is the Wdith value of each item multiplied by the Flex-shrink value quadrature,
2: (100 * 1) = 100
3: (100 * 2) = 200
4: (100 * 3) = 300
The product of all items is then summed.
(100 + 200 + 300) =600
Get the ratio and multiply the space you want to exceed.
A: (100/600) * 100 = 16.66
B: (200/600) * 100 = 33.33
C: (300/600) * 100 = 50
Get each of the remaining space minus the reduced space
A: (100–16.66) = 83.34
B: (100–33.33) = 66.67
C: (100-50) = 50
Okay, so that's the calculated width.