Remove space (gaps) between multiple lines of flex items when they wrap
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
andalign-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
propertyThe
align-content
property aligns a flex container’s lines within the flex container when there is extra space in the cross-axis, similar to howjustify-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.