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 |