Remove space (gaps) between multiple lines of flex items when they wrap

by

An initial setting of a flex container is align-content: stretch.

This means that multiple lines of flex items will be distributed evenly along the cross axis.

To override this behavior, apply align-content: flex-start to the container.

When you’re working in a single-line flex container (i.e., flex-wrap: nowrap), the properties to use to distribute space along the cross axis are align-items and align-self.

When you’re working in a multi-line flex container (i.e., flex-wrap: wrap) – like in the question – the property to use to distribute flex lines (rows / columns) along the cross axis is align-content.

From the spec:

8.3. Cross-axis Alignment: the align-items and align-self properties

align-items sets the default alignment for all of the flex container’s items, including anonymous flex items. align-self allows this default alignment to be overridden for individual flex items.

8.4. Packing Flex Lines: the align-content
property

The align-content property aligns a flex container’s lines within the
flex container when there is extra space in the cross-axis, similar to
how justify-content aligns individual items within the main-axis.
Note, this property has no effect on a single-line flex container.

The align-content property takes six values:

  • flex-start
  • flex-end
  • center
  • space-between
  • space-around
  • stretch

Here’s the definition for stretch:

stretch

Lines stretch to take up the remaining space. If the leftover free-space is negative, this value is identical to flex-start. Otherwise, the free-space is split equally between all of the lines, increasing their cross size.

In other words, align-content: stretch on the cross axis is similar to flex: 1 on the main axis.

More Related Contents:

  1. Flexbox: center horizontally and vertically
  2. CSS-only masonry layout
  3. Make container shrink-to-fit child elements as they wrap
  4. When flexbox items wrap in column mode, container does not grow its width
  5. One flex/grid item sets the size limit for siblings
  6. Why are flex items not wrapping?
  7. Equal height columns with CSS
  8. Make grid container fill columns not rows
  9. Centered elements inside a flex container are growing and overflowing beyond top [duplicate]
  10. Make flex items take content width, not width of parent container
  11. Make background color extend into overflow area
  12. Center text over an image in flexbox
  13. Using flex order property to re-arrange items for desktop and mobile views
  14. Why can’t be flex containers?
  15. Flexbox fill available space vertically
  16. Prevent flex items from rendering side to side
  17. Rendering problems using flexbox in Firefox and Chrome 48 [duplicate]
  18. What’s the difference between flex-start and baseline?
  19. Equal space between flex items
  20. How can I make a display:flex container expand horizontally with its wrapped contents?
  21. Text not centered with justify-content: center
  22. How to stretch flex child to fill height of the container?
  23. Flexbox resize and scrollable overflow [duplicate]
  24. How can I show three columns per row?
  25. CSS object-fit: contain; is keeping original image width in layout
  26. How to center horizontally and vertically?
  27. Flexbox on IE11: image stretched for no reason?
  28. extra space when centering elements using flexbox
  29. Height is not correct in flexbox items in Chrome [duplicate]
  30. Sizing flex items on the last row

Leave a Comment