HTML Academy
The flex-wrap property, reverse overflow
Flexbox, part 115/32
Back to the list of tasks
  • 1. The display: flex property, flex item
  • 2. The flex-direction property, main axis
  • 3. The flexbox cross axis
  • 4. The justify-content property, alignment along the main axis
  • 5. The justify-content property: flex-start | flex-end
  • 6. The justify-content property: space-between | space-around
  • 7. The align-items property, alignment along the cross axis
  • 8. The align-items property: flex-start | flex-end
  • 9. The align-items: baseline property
  • 10. The align-self property, or selfish alignment
  • 11. The align-self: baseline property
  • 12. Test: Creating a simple palette
  • 13. The flex-wrap property, overflow of flex items
  • 14. The flex-wrap property, reverse overflow
  • 15. The align-content property, alignment of flex container lines
  • 16. The align-content property: stretch and align-items
  • 17. The align-content property: non-stretch and align-items
  • 18. The align-content property, remaining values
  • 19. The order property, the sequence number of the flex item
  • 20. Test: Creating a more complicated palette
  • 21. Perfect centering by assigning margin: auto to the flex container
  • 22. Perfect centering, flex alignment
  • 23. The adaptive horizontal menu, part 1
  • 24. The adaptive horizontal menu, part 2
  • 25. The adaptive horizontal menu, part 3
  • 26. The vertical row of icons
  • 27. The vertical row of icons, part 2
  • 28. The vertical row of icons, part 3
  • 29. Ordering elements with CSS
  • 30. Vertically aligning blocks using a flexbox
  • 31. Test: Complex palettes
  • 32. Summary of “Flexbox, Part 1”
The align-content property: stretch and align-items
  • Sign up
  • Log in

Loading…
Everything will be ready in few seconds

  • Theory
  • Theory
  • Comments

The align-content property, alignment of flex container lines

Remember the justify-content property, which controls the distribution of flex items along the main axis?

There is a very similar property align-content, which controls the alignment of rows of flex items along the cross axis. These properties have practically identical values:

  • flex-start,

  • flex-end,

  • center,

  • space-between,

  • space-around,

  • and stretch, which is also a value of align-content, but which is absent from justify-content and is the default value.

The align-content property overrides any other assigned value of align-items, which controls the alignment of the flex items along the cross axis. This happens when there is only one row of flex items and when there are several such rows.

Previously the specification prescribed a different behavior:

  • if there is only one row of flex items, then align-items takes precedence;
  • if there are several rows, then align-content takes precedence.

For a fairly long time this was the chosen behavior in all browsers. But in early 2019, the behavior was updated in all modern browsers according to the specification.

You may encounter the old behavior in this assignment if you are completing this chapter in an old browser version.

Comments

  • index.html
  • style.css
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Alignment of flex container lines, align-content</title> <link href="course.css" rel="stylesheet"> <link href="style.css" rel="stylesheet"> </head> <body class="house"> <div class="room room-1"> <div class="rug simba"></div> <div class="rug rudolf"></div> <div class="rug muffin"></div> <div class="rug massimo"></div> </div> <div class="room room-2"> <div class="rug simba"></div> <div class="rug rudolf"></div> <div class="rug muffin"></div> <div class="rug massimo"></div> </div> </body> </html>
CSS
.room { display: flex; flex-wrap: wrap; height: 150px; } .rug { min-height: 20px; width: 80px; } .room-1 { align-content: stretch; align-items: flex-end; } .room-2 { align-content: stretch; align-items: flex-start; }

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
    1. For .room-1 set align-content to the start of the cross axis,
    2. and for .room-2 set align-content to the end of the cross axis.
    3. Then increase the width of the rug (.rug) to 120px so that there are two rows of items in the blocks.

    See how the alignment of the rows takes precedence over the alignment of the items.

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

    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.