0 added
0 removed
Original
2026-01-01
Modified
2026-03-09
1
<p><b>Step 1</b>. Calculate the free space in the flex container:</p>
1
<p><b>Step 1</b>. Calculate the free space in the flex container:</p>
2
Free space = Container width - The total of the basic sizes of the items<p><b>Step 2</b>. Calculate the size of the minimum share of free space:</p>
2
Free space = Container width - The total of the basic sizes of the items<p><b>Step 2</b>. Calculate the size of the minimum share of free space:</p>
3
The share of free space = Free space / Amount of flex-grow for all items<p><b>Step 3</b>. The basic size of each flex item is increased by the size of the minimum share of free space multiplied by the value flex-grow of this item:</p>
3
The share of free space = Free space / Amount of flex-grow for all items<p><b>Step 3</b>. The basic size of each flex item is increased by the size of the minimum share of free space multiplied by the value flex-grow of this item:</p>
4
Total size = Basic size + (Share of free space * flex-grow)<p>For the upper block with raccoons, we want to assign the factors 1 and 2. However, the required block sizes are achieved with the factors 1 and 3. Let’s calculate:</p>
4
Total size = Basic size + (Share of free space * flex-grow)<p>For the upper block with raccoons, we want to assign the factors 1 and 2. However, the required block sizes are achieved with the factors 1 and 3. Let’s calculate:</p>
5
Free space = 300px - (50px * 2) = 200px Share of free space = 200px / (1 + 3) = 50px Total size of the green raccoon = 50px + (50px * 1) = 100px Total size of the brown raccoon = 50px + (50px * 3) = 200px<p>But if you set the basic size of the flex items to zero, the free space will occupy the entire width of the flex container, and the greed factors will be different.</p>
5
Free space = 300px - (50px * 2) = 200px Share of free space = 200px / (1 + 3) = 50px Total size of the green raccoon = 50px + (50px * 1) = 100px Total size of the brown raccoon = 50px + (50px * 3) = 200px<p>But if you set the basic size of the flex items to zero, the free space will occupy the entire width of the flex container, and the greed factors will be different.</p>
6
<p>It is not worth using flex-basis: 0 and flex-grow to precisely control the relative sizes. It is better to define your basic size using percentages.</p>
6
<p>It is not worth using flex-basis: 0 and flex-grow to precisely control the relative sizes. It is better to define your basic size using percentages.</p>
7
<p><i>Precision.</i>It is not just flex-basis that affects the size of the remaining free space, but also frames and margins. If flex-basis is explicitly set to zero, then min-width will not affect the size of the free space, since restrictions on the sizes of flex items are applied after the free space is redistributed.</p>
7
<p><i>Precision.</i>It is not just flex-basis that affects the size of the remaining free space, but also frames and margins. If flex-basis is explicitly set to zero, then min-width will not affect the size of the free space, since restrictions on the sizes of flex items are applied after the free space is redistributed.</p>