Loading…
Everything will be ready in few seconds
- Theory
- Theory
- Comments
Calculating the total size with flex-grow
Step 1. Calculate the free space in the flex container:
Free space = Container width - The total of the basic sizes of the items
Step 2. Calculate the size of the minimum share of free space:
The share of free space = Free space / Amount of flex-grow for all items
Step 3. 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:
Total size = Basic size + (Share of free space * flex-grow)
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:
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
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.
flex-basis: 0
and flex-grow
to precisely control the relative sizes. It is better to define your basic size using percentages.Precision. 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.
- index.html
- style.css
Thanks! We’ll fix everything at once!
The code has changed, click “Refresh” or turn autorun on.
You’ve gone to a different page
Click inside the mini-browser to shift the focus onto this window.
Comments