Align elements within a flexbox
align-content
Use this property to align the elements of a flexbox container — in the orthogonal direction — when there is extra space available.
Property values
This property is used to specify one aspect of an element that serves as a flexbox container.
When a container has extra unused space — in the orthogonal direction — this property will determine how that space should be divied up.
This property operates in a manner that is similar to the justify-content property, but in the orthogonal direction of flow. So, for containers with flex-direction:column, this property determines the spacing of elements between the top and bottom of the container's full height. And for containers with flex-direction:row, this property determines the spacing of elements between the left and right edges of the container's full width.
On flexboxes, this algorithm is only meaningful when flex-wrap:wrap is specified and there is more than one row of elements.
Use one of these keywords to place all of the elements adjacent to each other, with the extra space to the top [left] or bottom [right]:
| flex-start | The items are all shifted to the starting edge of the container |
| flex-end | The items are all shifted to the ending edge of the container |
| center | The items are all positioned together in the middle of the container |
Or use one of these keywords to distribute the extra space between the elements:
| space-between | The items are evenly distributed within the container, with equal spacing between each, with the first item flush top [left] and the last item flush bottom [right] |
| space-around | The items are evenly distributed within the container, with equal spacing between each, with a half-sized space before the first item and after the last item |
| space-evenly | The items are evenly distributed within the container, with equal spacing between each, with a full-sized space before the first item and after the last item |
| stretch | Stretch each item equally to fill the entire container, but respecting each element's max-height [max-width] property |
| normal | Same as stretch |
And use either of these additional keywords, together with any of the above, to specify what happens if the elements aren't able to fully fit within the container:
| safe | If the chosen keyword from above would cause an element to overflow or lose data, use the start rule |
| unsafe | If the chosen keyword from above would cause an element to overflow or lose data, stick with the rule anyway |
Examples
display: flex;
flex-wrap: wrap;
align-content: center;