The CSS justify-items
property defines the default justify-self
for all items of the box, giving them all a default way of justifying each box along the appropriate axis.
The effect of this property is dependent of the layout mode we are in:
/* Basic keywords */ justify-items: auto; justify-items: normal; justify-items: stretch; /* Positional alignment */ justify-items: center; /* Pack items around the center */ justify-items: start; /* Pack items from the start */ justify-items: end; /* Pack items from the end */ justify-items: flex-start; /* Pack flex items from the start */ justify-items: flex-end; /* Pack flex items from the end */ justify-items: self-start; justify-items: self-end; justify-items: left; /* Pack items from the left */ justify-items: right; /* Pack items from the right */ /* Baseline alignment */ justify-items: baseline; justify-items: first baseline; justify-items: last baseline; /* Overflow alignment (for positional alignment only) */ justify-items: safe center; justify-items: unsafe center; /* Legacy alignment */ justify-items: legacy right; justify-items: legacy left; justify-items: legacy center; /* Global values */ justify-items: inherit; justify-items: initial; justify-items: unset;
This property can take one of four different forms:
normal
, auto
, or stretch
.baseline
keyword, plus optionally one of first
or last
.center
, start
, end
, flex-start
, flex-end
, self-start
, self-end
, left
, or right
. Plus optionally safe
or unsafe
.legacy
keyword, followed by one of left
or right
.auto
justify-items
property of the parents box, unless the box has no parent, or is absolutely positioned, in these cases, auto
represents normal
.normal
start
.start
on replaced absolutely-positioned boxes, and as stretch
on all other absolutely-positioned boxes.stretch
, except for boxes with an aspect ratio or an intrinsic sizes where it behaves like start
.start
end
flex-start
start
.flex-end
end
.self-start
self-end
center
left
start
.right
start
.baseline
first baseline
last baseline
first baseline
is start
, the one for last baseline
is end
.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.safe
start
.unsafe
legacy
justify-self: auto
value, the legacy
keyword is not considered by the descend, only the left
, right
, or center
value associated to it.normal | stretch | <baseline-position> | <overflow-position>? [ <self-position> | left | right ] | legacy | legacy && [ left | right | center ]where
<baseline-position> = [ first | last ]? baseline
<overflow-position> = unsafe | safe
<self-position> = center | start | end | self-start | self-end | flex-start | flex-end
Specification | Status | Comment |
---|---|---|
CSS Box Alignment Module Level 3 The definition of 'justify-items' in that specification. | Working Draft | Initial definition |
Initial value | legacy |
---|---|
Applies to | all elements |
Inherited | no |
Media | visual |
Computed value | as specified |
Animation type | discrete |
Canonical order | per grammar |
Desktop | ||||||
---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | |
Basic support | 52 | 12 | 20 | 11 | 12.1 | 9 |
Mobile | |||||||
---|---|---|---|---|---|---|---|
Android webview | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet | |
Basic support | 52 | 52 | Yes | 20 | 12.1 | 9.2 | ? |
Desktop | ||||||
---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | |
Basic support | 57 | 16 | 45 | 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 | 57 | 16 | 45 | 44 | 10.3 | 6.0 |
justify-self
property
© 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-items