justify-content CSS property specifies how flex items are aligned along the main axis of the flex container after any flexible lengths and auto margins have been resolved.
The following table summarizes the usages context and the version history of this property.
|Applies to:||Flex containers|
|Animatable:||No. See animatable properties.|
|Version:||New in CSS3|
The syntax of the property is given with:
The example below shows the
justify-content property in action.
ExampleTry this code »
/* Safari */
/* Standard syntax */
The following table describes the values of this property.
||Flex items are packed toward the start of the line. This is default value.|
||Flex items are packed toward the end of the line.|
||Flex items are packed toward the center of the line.|
||Flex items are evenly distributed along the line.|
||Flex items are evenly distributed so that the space between two adjacent items is the same.|
||Sets this property to its default value.|
||If specified, the associated element takes the computed value of its parent element
justify-content property is supported in all major modern browsers.