The CSS 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 interactive example below demonstrates some of the values using Grid Layout.
The alignment is done after the lengths and auto margins are applied, meaning that, if in a Flexbox layout there is at least one flexible element, with flex-grow
different from 0
, it will have no effect as there won't be any available space.
/* Positional alignment */ justify-content: center; /* Pack items around the center */ justify-content: start; /* Pack items from the start */ justify-content: end; /* Pack items from the end */ justify-content: flex-start; /* Pack flex items from the start */ justify-content: flex-end; /* Pack flex items from the end */ justify-content: left; /* Pack items from the left */ justify-content: right; /* Pack items from the right */ /* Baseline alignment */ /* justify-content does not take baseline values */ /* Normal alignment */ align-content: normal; /* Distributed alignment */ justify-content: space-between; /* Distribute items evenly The first item is flush with the start, the last is flush with the end */ justify-content: space-around; /* Distribute items evenly Items have a half-size space on either end */ justify-content: space-evenly; /* Distribute items evenly Items have equal space around them */ justify-content: stretch; /* Distribute items evenly Stretch 'auto'-sized items to fit the container */ /* Overflow alignment */ justify-content: safe center; justify-content: unsafe center; /* Global values */ justify-content: inherit; justify-content: initial; justify-content: unset;
start
end
flex-start
start
.flex-end
end
.center
left
start
.right
start
.normal
justify-content
value was set. This value behaves as stretch
in grid and flex containers.baseline
first baseline
last baseline
first baseline
is start
, the one for last baseline
is end
.space-between
space-around
space-evenly
stretch
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.safe
start
.unsafe
normal | <content-distribution> | <overflow-position>? [ <content-position> | left | right ]where
<content-distribution> = space-between | space-around | space-evenly | stretch
<overflow-position> = unsafe | safe
<content-position> = center | start | end | flex-start | flex-end
#container { display: flex; justify-content: space-between; /* Can be changed in the live sample */ } #container > div { width: 100px; height: 100px; background: linear-gradient(-45deg, #788cff, #b4c8ff); }
Specification | Status | Comment |
---|---|---|
CSS Box Alignment Module Level 3 The definition of 'justify-content' in that specification. | Working Draft | Adds the [ first | last ]? baseline, self-start, self-end, start, end, left, right, unsafe | safe values. |
CSS Flexible Box Layout Module The definition of 'justify-content' in that specification. | Candidate Recommendation | Initial definition |
Initial value | normal |
---|---|
Applies to | flex containers |
Inherited | no |
Media | visual |
Computed value | as specified |
Animation type | discrete |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
Desktop | ||||||
---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | |
Basic support | 52
|
12
|
20
|
11 | 12.1 | 9 |
space-evenly |
60 | No | 52 | No | 47 | 11 |
start and end
|
Partial
|
No | Yes | No | Partial
|
? |
left and right
|
Partial
|
No | 52
|
Partial
|
Partial
|
? |
baseline |
57 | No | ? — 60
|
No | ? | ? |
first baseline and last baseline
|
No | No | 52 — 60
|
No | No | ? |
stretch |
57 | No | 52 | No | 44 | ? |
safe and unsafe
|
No | No | 63 | No | No | ? |
Mobile | |||||||
---|---|---|---|---|---|---|---|
Android webview | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet | |
Basic support | 52
|
52
|
Yes
|
? | 12.1 | ? | Yes |
space-evenly |
60 | 60 | No | 52 | 47 | 11 | No |
start and end
|
? | ? | ? | ? | ? | ? | ? |
left and right
|
? | ? | ? | 52
|
? | ? | ? |
baseline |
? | ? | No | ? — 60
|
? | ? | ? |
first baseline and last baseline
|
? | ? | No | 52 — 60
|
? | ? | No |
stretch |
? | ? | No | 52 | ? | ? | ? |
safe and unsafe
|
? | ? | No | 63 | ? | ? | No |
Desktop | ||||||
---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | |
Basic support | 57 | 16 | 52 | No | 44 | 10.1 |
Mobile | |||||||
---|---|---|---|---|---|---|---|
Android webview | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet | |
Basic support | 57 | 52 | Yes | 52 | 44 | 10.3 | 6.2 |
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content