align-content

The CSS align-content property sets the distribution of space between and around content items along a flexbox’s cross axis, or a grid or block-level element’s block axis.

This property has no effect on single line flex containers (i.e., ones with flex-wrap: nowrap).

Values: This property is specified as one or two of the following keyword values:

Values: normal The items are packed in their default position as if no align-content value was set. start The items are packed flush to each other against the start edge of the alignment container in the cross axis. center The items are packed flush to each other in the center of the alignment container along the cross axis. end The items are packed flush to each other against the end edge of the alignment container in the cross axis. flex-start The items are packed flush to each other against the edge of the alignment container depending on the flex container’s cross-start side. This only applies to flex layout items. For items that are not children of a flex container, this value is treated like start. flex-end The items are packed flush to each other against the edge of the alignment container depending on the flex container’s cross-end side.

Syntax example: align-content: normal;