Search within TutorialsPark

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


Syntax:

CSS align-content property. internetexplorer safari firefox opera chrome

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

Property Values

Value Description
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.

Specifications

Specs Value
Name align-content
Value flex-start | flex-end | center | space-between | space-around | inherit |
Initial Value stretch
Applies to flex-containers
Javascript syntax object.style.alignContent="center"
Inherited No
Computed Value Same as declared value.
Browser Support internetexplorer safari firefox opera chrome


Related Examples.