HTML Academy
The align-content property, alignment of flex container lines
Flexbox, part 116/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: non-stretch and align-items
  • Sign up
  • Log in

Loading…
Everything will be ready in few seconds

  • Theory
  • Theory
  • Comments

The align-content property: stretch and align-items

If you simultaneously assign values to align-items and align-content, the align-items property will not be completely deactivated. Rather, it can still affect the display of flex items in rows.

This can happen when we use the default value of stretch for align-content. It stretches the rows of flex items in such a way that the remaining free space between them is divided equally.

The way that lines are displayed with align-content: stretch depends on the value of align-items:

  • If align-items has been assigned the value stretch, then the items in the lines will be stretched to the entire height of their respective lines.
  • If the value differs from stretch, then the items in the rows are compressed to the size of their own contents and are aligned in the rows depending on the value of align-items.

Let’s see how this effect behaves in practice.

Comments

  • index.html
  • style.css
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>align-content: stretch and align-items</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: stretch; } .room-2 { align-content: stretch; align-items: stretch; } .room-2 .rug { width: 80px; }

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. Assign .rug inside .room-2 a width of 120px so that two rows are displayed.
    2. Then set align-items for both container rooms at the start of the axis,
    3. the middle of the axis,
    4. and the end of the axis.

    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.