CSS3 align-content Property
To align items along the cross axis of the flex-box container
Definition and Notes.
1. The CSS3 align-content property is used align contents along the cross axis of the flex container, if space is available.
2. No effect will be created if there is only a single row or column.The values are same as justify-content, with one addition of stretch
CSS align-content property.
View in Splitscreen»
Code-Editor:Note-Even if there is one item with flex-grow value other than 0, no properties will be applied, as no empty space would be available
|flex-start||Flex Items are laid towards the start of the main axis.Its the default|
|flex-end||Flex Items are laid towards the end of the main axis|
|center||Flex items are laid in the center of the container|
|space-between||Flex items are evenly laid out on the Main axis, with first and last item against the edge|
|space-around||Flex items are evenly laid out on the main axis, with half-size spaces at each end of the axis|
|inherit||The values are inherited from the parent element|
|stretch||The available free space is split evenly between the rows and columns increasing their sizes along the cross axis . Its the default value.|
|Value||flex-start | flex-end | center | space-between | space-around | inherit ||
|Computed Value||Same as declared value.|