CSS justify-content Property
Example
#example {
display: flex;
justify-content: center;
}1
2
3
Meaning
The justify-content property defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container.
The justify-content property aligns flex items along the main axis of the current line of the flex container.
This is done after any flexible lengths and any auto margins have been resolved.
Typically it helps distribute extra free space leftover when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size.
It also exerts some control over the alignment of items when they overflow the line.
| Default value: | flex-start |
| Inherited: | No |
| Animatable: | No |
| Version: | CSS3 |
| JavaScript syntax: | |
Standard Syntax
justify-content: normal|baseline|start|stretch|flex-start|flex-end|center|left|right|space-between|space-around|space-evenly|initial|inherit|revert|revert-layer|unset;Browser Support
The numbers in the table specify the first browser version that fully supports the property.
Status
Property Values
The following table describes the values of this property.
| Value | Description |
|---|---|
| normal | The items are packed in their default position as if no justify-content value was set. This value behaves as stretch in grid and flex containers. |
| baseline | Specifies participation inbaseline alignment.
|
| start | The items are packed flush to each other toward the start edge of the alignment container in the main axis. |
| end | The items are packed flush to each other toward the end edge of the alignment container in the main axis. |
| flex-start | This is default value. Items are packed toward the start of the line. |
| flex-end | Items are packed toward the end of the line. |
| center | Items are packed toward the center of the line. |
| left | The items are packed flush to each other toward the left edge of the alignment container. If the property's axis is not parallel with the inline axis, this value behaves like start. |
| right | The items are packed flush to each other toward the right edge of the alignment container in the appropriate axis. If the property's axis is not parallel with the inline axis, this value behaves like start. |
| stretch | If the combined size of the items along the main axis is less than the size of the alignment container, any auto-sized items have their size increased equally (not proportionally), while still respecting the constraints imposed by max-height/max-width (or equivalent functionality), so that the combined size exactly fills the alignment container along the main axis. |
| space-between | Items are evenly distributed along the line. |
| space-around | Items are evenly distributed so that the space between two adjacent items is the same. |
| space-evenly | Items will have equal space around them. |
| safe | Used alongside an alignment keyword. If the chosen keyword means that the item overflows the alignment container causing data loss, the item is instead aligned as if the alignment mode were start. |
| unsafe | Used alongside an alignment keyword. Regardless of the relative sizes of the item and alignment container, and regardless of whether overflow which causes data loss might happen, the given alignment value is honored. |
| initial | Sets this property to its default value. |
| inherit | If specified, the associated element takes the computed value of its parent element animation-delay property. |
| revert | Reverts the cascaded value of the property from its current value to the value the property |
| revert-layer | Rollback styles to the ones specified in previous cascade layers. |
| unset | Resets a property to its inherited value if the property naturally inherits from its parent, and to its initial value if not. |
Default CSS Property Values
selectors {
justify-content: flex-start;
}More Example
Example
.container {
display: flex;
justify-content: center;
}More Example
1
2
3
4
5
6
Example
.grid-container {
display: grid;
grid-template: 120px 120px / auto auto auto;
justify-content: center;
}