HTML Academy
Test: Cubism
Flexbox, part 27/28
Back to the list of tasks
  • 1. Flex items and the block model
  • 2. Features of the margin property
  • 3. Alignment and margins
  • 4. The flow direction of the main axis and margins
  • 5. The initial main size of flex item, flex-basis
  • 6. Test: Cubism
  • 7. The item growth factor, flex-grow
  • 8. Growing items proportionally
  • 9. Calculating the total size with flex-grow
  • 10. The item shrinkage factor, flex-shrink
  • 11. Shrinking items proportionally
  • 12. Calculating the total size with flex-shrink
  • 13. flex-shrink and min-width
  • 14. Test: Mastering factors
  • 15. The flex shorthand property
  • 16. Multi-line flex containers and flex-shrink
  • 17. Multi-line flex containers and flex-grow
  • 18. flex-basis: 100% and flex-wrap
  • 19. The heading with description in flexboxes
  • 20. Heading with description, part 2
  • 21. Flexible menu with overflowing content
  • 22. Flexible menu with overflow, part 2
  • 23. Input fields with dynamic width
  • 24. The course card
  • 25. Course card, part 2
  • 26. Course card, part 3
  • 27. So many cards
  • 28. Test: Flexible flows
Growing items proportionally
  • Sign up
  • Log in

Loading…
Everything will be ready in few seconds

  • Theory
  • Theory
  • Comments

The item growth factor, flex-grow

We didn’t tell you about something in the previous assignment. In fact, the basic size is not just the size of the item along the main axis. Rather, it is the initial or original size along this axis.

Why are these initial or original sizes so important?

Again, we should state that it all depends on the mechanism that is used to redistribute free space in the flexbox.

If there is still free space inside the flex container along the main axis, we can ask the flex item to increase in size in order to occupy this space. We can do this using the flex-grow property, which we can term the “flex-greed factor” of the flex item.

The flex-grow property accepts non-negative integer values, and its default value is 0.

If the value of flex-grow is equal to zero, then the flex item will not try to occupy the remaining free space in the flex container, meaning that it will not increase in size.

If the flex-grow value is greater than zero, then the flex item will increase in size in order to take over any remaining free space.

It turns out the basic size is the same as the original size of the flex items before flex-grow is applied.

Comments

  • index.html
  • style.css
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>The item growth factor, flex-grow</title> <link href="course.css" rel="stylesheet"> <link href="style.css" rel="stylesheet"> </head> <body class="world"> <div class="spot spot-small"> <div class="skate racoon-green"></div> <div class="skate racoon-brown"></div> </div> <div class="spot spot-small"> <div class="skate racoon-gray"></div> <div class="skate racoon-orange"></div> </div> </body> </html>
CSS
.spot { display: flex; } .racoon-green { } .racoon-orange { }

What didn’t you like in this task?

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.

100%
Goalscompleted
0

    Assign a growth factor for flex-grow that is equal to 1:

    1. to the Green Raccoon’s skateboard (.racoon-green)
    2. and to the Orange Raccoon’s skateboard (.racoon-orange).

    Cookies ∙ Privacy ∙ License Agreement ∙ About ∙ Contacts ∙ © HTML Academy OÜ, 2019−2025

    VISAMastercard

    Log in

    or

    Forgot your password?

    Sign up

    Sign up

    or
    Log in

    Restore access

    Have you forgotten your password or lost access to your profile? Enter your email connected to your profile and we will send you a link to restore access.

    Forgot to connect your email to the profile? Email us and we’ll help.