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;
align-content

style > flexbox > align-contentAlign elements within a flexbox

Q