CSS3 justify-content Property
Topic: CSS3 Properties ReferencePrev|Next
Description
The 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.
| Default value: | flex-start |
|---|---|
| Applies to: | Flex containers |
| Inherited: | No |
| Animatable: | No. See animatable properties. |
| Version: | New in CSS3 |
Syntax
The syntax of the property is given with:
The example below shows the justify-content property in action.
Example
Try this code ».flex-container {
/* Safari */
display: -webkit-flex;
-webkit-justify-content: space-around;
/* Standard syntax */
display: flex;
justify-content: space-around;
}Property Values
The following table describes the values of this property.
| Value | Description |
|---|---|
flex-start |
Flex items are packed toward the start of the line. This is default value. |
flex-end |
Flex items are packed toward the end of the line. |
center |
Flex items are packed toward the center of the line. |
space-between |
Flex items are evenly distributed along the line. |
space-around |
Flex items are evenly distributed so that the space between two adjacent items is the same. |
initial |
Sets this property to its default value. |
inherit |
If specified, the associated element takes the computed value of its parent element justify-content property. |
Browser Compatibility
The justify-content property is supported in all major modern browsers.
 |
Basic Support—
|
Further Reading
See tutorial on: CSS Fonts, CSS Units, CSS Pseudo-elements.
Related properties: align-content, align-items, align-self, display, flex, flex-basis, flex-direction, flex-flow, flex-grow, flex-shrink, flex-wrap, justify-content, min-height, min-width, order.
