I am trying to have a number of items underneath each other in a container with a set height. Items will then carry on next to each other if there's no space left.
This is the idea:
I am trying to achieve this using flexbox, a container with a set height, direction is set to
An initial value of a flex container is
This means that multiple lines of flex items will be distributed evenly along the cross axis.
To override that 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
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 space along the cross axis is
From the spec:
align-itemssets the default alignment for all of the flex container’s items, including anonymous flex items.
align-selfallows this default alignment to be overridden for individual flex items.
align-contentproperty aligns a flex container’s lines within the flex container when there is extra space in the cross-axis, similar to how
justify-contentaligns individual items within the main-axis. Note, this property has no effect on a single-line flex container.
align-content property takes six values:
Here's the definition for
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.