The CSS justify-self
property set the way a box is justified inside its alignment container along the appropriate axis.
The effect of this property is dependent of the layout mode we are in:
/* Basic keywords */ justify-self: auto; justify-self: normal; justify-self: stretch; /* Positional alignment */ justify-self: center; /* Pack item around the center */ justify-self: start; /* Pack item from the start */ justify-self: end; /* Pack item from the end */ justify-self: flex-start; /* Pack flex item from the start */ justify-self: flex-end; /* Pack flex item from the end */ justify-self: self-start; justify-self: self-end; justify-self: left; /* Pack item from the left */ justify-self: right; /* Pack item from the right */ /* Baseline alignment */ justify-self: baseline; justify-self: first baseline; justify-self: last baseline; /* Overflow alignment (for positional alignment only) */ justify-self: safe center; justify-self: unsafe center; /* Global values */ justify-self: inherit; justify-self: initial; justify-self: unset;
This property can take one of three 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
.safe
or unsafe
.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
auto | normal | stretch | <baseline-position> | <overflow-position>? [ <self-position> | left | right ]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-self' in that specification. | Working Draft | Initial definition |
Initial value | auto |
---|---|
Applies to | block-level boxes, absolutely-positioned boxes, and grid items |
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 | 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 |
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-items
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-self