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.

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.

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

HTML

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Calculating the total size with flex-grow</title> <link href="course.css" rel="stylesheet"> <link href="style.css" rel="stylesheet"> </head> <body class="world world-flat"> <div class="spot spot-1"> <div class="skate no-width racoon-green"></div> <div class="skate no-width racoon-brown"></div> <div class="ruler ruler-green w-100">100px</div> <div class="ruler ruler-brown w-200 l-100">200px</div> </div> <div class="spot spot-2"> <div class="skate no-width racoon-green"></div> <div class="skate no-width racoon-brown"></div> <div class="ruler ruler-green w-200">200px</div> <div class="ruler ruler-brown w-300 l-200">300px</div> </div> </body> </html>

CSS

.spot { display: flex; padding: 10px 0; height: 100px; } .spot-1 { width: 300px; } .spot-1 .skate { flex-basis: 0; min-width: 50px; } .spot-1 .racoon-green { flex-grow: 0; } .spot-1 .racoon-brown { flex-grow: 0; } .spot-2 { width: 500px; } .spot-2 .skate { flex-basis: 0; min-width: 50px; } .spot-2 .racoon-green { flex-grow: 0; } .spot-2 .racoon-brown { flex-grow: 0; }

Goalscompleted

Assign the value flex-grow to the raccoons in the .spot-1 upper clearing so that their width is equal to the width of the bars.
Do the same thing with the raccoons in the .spot-2 lower clearing.

In this assignment you can only change the values of flex-grow,

Calculating the total size with flex-grow

Comments

Log in

Sign up

Restore access