description & Usage
The justify-content property flattens flexible items when the items do not use all the available space in the horizontal direction.
Note: Use the align-item property to align items.
Informations
| # | Description |
|---|---|
| Default Value | flex-start |
| Inherited | no |
| Animatable | no |
| Version | CSS3 |
| JavaScript syntax | object.style.justifyContent="space-between" |
Browser compatibility and Support
The numbers inserted in the browser fields indicate the version that supports the justify-content property.
| # | Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| justify-content |
Syntax
Values
| Values | Description |
|---|---|
| flex-start | Items are placed in the start section of the container by default. |
| flex-end | The items are placed in the final section of the container. |
| center | Items are placed in the central part of the compartment. |
| space-between | Items are spaced in the compartment. |
| space-around | There will be a space before, after and between the items. |
| space-evenly | Items are placed at an equal distance around themselves in the compartment. |
| initial | Adds this value to its default property. |
| inherit | It inherits this value from its parent tag. |
Related Pages
CSS training: CSS flexbox
CSS training: CSS grid
CSS reference: align-content property
CSS reference: align-items property
CSS reference: align-self attribute
HTML DOM reference: justifyContent attribute
