Property Description
The justify-content property aligns the flexible container's items when the items do not use all available space on the main-axis (horizontally).
This property has the following syntax:
justify-content: flex-start|flex-end|center|space-between|space-around|initial|inherit;
Property Values
Value | Description |
---|---|
flex-start | (default) Items are positioned at the beginning of the container |
flex-end | Items are positioned at the end of the container |
center | Items are positioned at the center of the container |
space-between | Items are positioned with space between the lines |
space-around | Items are positioned with space before, between, and after the lines |
initial | Specifies that the value of the property should be set to the default value |
inherit | Specifies that the value of the property should be inherited from the parent element |
Browser Support
Chrome | Firefox | IE | Safari | Opera |
---|---|---|---|---|
29.0 21.0 -webkit- |
28.0 18.0 -moz- |
11.0 | 6.1 -webkit- | 12.10 |
Miscellaneous Information
Inherited: | No |
---|---|
Defined In: | CSS3 |
Default Value: | flex-start |