extra space when centering elements using flexbox

by

align-content

Note that align-content: stretch is also in play here.

The align-content property distributes free space among flex lines. It’s default value is stretch.

So when your items wrap to two lines, align-content: stretch distributes free space equally across lines.

align-items

Remove align-items: center from the container. You’ll then notice that when items wrap, there is no gap between lines (or “rows”, in this case). demo

Line heights are set by align-content, the height of the items, and the content of the items.

enter image description here

align-content and align-items working together

Restore align-items: center. Now when items wrap, there is a visible gap between lines.

enter image description here

This is because align-items: center positions the items in the vertical center of the line, based on line heights established by align-content: stretch, item heights, and item content.

The line heights are set here (with align-content: stretch and align-items: stretch):

enter image description here

… and continue here (with align-content: stretch and align-items: center):

enter image description here

align-items is having no effect on the height of the flex line. That job is andled by align-content.

However, by changing the value of align-content (to flex-start, flex-end, space-between, center, etc.), you pack the flex lines, squeezing out the free space, and hence removing the gaps.

enter image description here

Why is the first row taller than the second row with align-content: stretch?

The container is set to height: 800px.

There are two items with defined heights:

  • .item-3 { height: 250px }
  • .item-4 { height: 300px }

When .item-5 and .item-6 form the second row, the free space in the container is, in its simplest form, 500px (800px – 300px).

So, in a container with two rows and align-content: stretch, 250px is distributed to the height of each row.

  • first row is 300px (defined height) plus 250px (free space)
  • second row is 250px (free space)

That’s why the first row is taller.

Just note that the free space calculation above is slightly off in the actual layout. That’s because there is text in the items, which consumes free space. You can factor in the height of the text to get the precise figures, or remove the text altogether to see the calculations above fall into place.

More details:

More Related Contents:

  1. Why don’t flex items shrink past content size?
  2. Can’t scroll to top of flex item that is overflowing container
  3. Fill the remaining height or width in a flex container
  4. How to vertically align text inside a flexbox?
  5. Equal height rows in a flex container
  6. Equal height children of flex items
  7. flex-grow not sizing flex items as expected
  8. How to Right-align flex item?
  9. How to remove the space between inline/inline-block elements?
  10. flex container min-height ignored in IE
  11. Keep the middle item centered when side items have different widths
  12. Maintain image aspect ratio when changing height
  13. float does not work in a flex container
  14. How can I have two fixed width columns with one flexible column in the center?
  15. How can I make my flexbox layout take 100% vertical space?
  16. CSS grid – maximum number of columns without media queries
  17. All widths set to width of widest element
  18. Make flex items overlap
  19. 5 items per row, auto-resize items in flexbox
  20. flex-grow not working in column layout
  21. CSS – How to have children in different parents the same height?
  22. Why does flexbox stretch my image rather than retaining aspect ratio?
  23. Aligning elements left and center with flexbox
  24. How to make a sticky footer using flexbox in IE11?
  25. Height of flex container not working properly in Safari
  26. Flexbox, z-index & position: static: Why isn’t it working?
  27. display: flex not working on Internet Explorer [duplicate]
  28. Image behavior within flexbox (rows embedded in columns)
  29. Flex items create space between them when they wrap [duplicate]
  30. Fitting child into parent

Leave a Comment