If the combined size of the alignment subjects is less than the size of the alignment container, any auto-sized alignment subjects 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.
<baseline-position> = [ first | last ]? baseline
first baseline
Specifies participation in first-baseline alignment: aligns the alignment baseline of the box's first baseline set with the corresponding baseline of its baseline-sharing group.
last baseline
Specifies participation in last-baseline alignment: aligns the alignment baseline of the box's last baseline set with the corresponding baseline of its baseline-sharing group.
baseline
Computes to first baseline.
<overflow-position> = unsafe | safe
unsafe
Regardless of the relative sizes of the alignment subject and alignment container, the given alignment value is honored.
safe
If the size of the alignment subject overflows the alignment container, the alignment subject is instead aligned as if the alignment mode were start.
<self-position> = center | start | end | self-start | self-end | flex-start | flex-end
center
Centers the alignment subject within its alignment container.
start
Aligns the alignment subject to be flush with the alignment container's start edge in the appropriate axis.
end
Aligns the alignment subject to be flush with the alignment container's end edge in the appropriate axis.
self-start
Aligns the alignment subject to be flush with the edge of the alignment container corresponding to the alignment subject's start side in the appropriate axis.
self-end
Aligns the alignment subject to be flush with the edge of the alignment container corresponding to the alignment subject's end side in the appropriate axis.
flex-start
Aligns the alignment subject to be flush with the edge of the alignment container corresponding to the flex container's main-start or cross-start side, as appropriate. Only used in flex layout.
flex-end
Aligns the alignment subject to be flush with the edge of the alignment container corresponding to the flex container's main-end or cross-end side, as appropriate. Only used in flex layout.
<'justify-items'> = normal | stretch | <baseline-position> | <overflow-position>? [ <self-position> | left | right ] | legacy | legacy && [ left | right | center ]
normal
Represents the default alignment for the layout mode.
stretch
If the combined size of the alignment subjects is less than the size of the alignment container, any auto-sized alignment subjects 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.
<baseline-position> = [ first | last ]? baseline
first baseline
Specifies participation in first-baseline alignment: aligns the alignment baseline of the box's first baseline set with the corresponding baseline of its baseline-sharing group.
last baseline
Specifies participation in last-baseline alignment: aligns the alignment baseline of the box's last baseline set with the corresponding baseline of its baseline-sharing group.
baseline
Computes to first baseline.
<overflow-position> = unsafe | safe
unsafe
Regardless of the relative sizes of the alignment subject and alignment container, the given alignment value is honored.
safe
If the size of the alignment subject overflows the alignment container, the alignment subject is instead aligned as if the alignment mode were start.
<self-position> = center | start | end | self-start | self-end | flex-start | flex-end
center
Centers the alignment subject within its alignment container.
start
Aligns the alignment subject to be flush with the alignment container's start edge in the appropriate axis.
end
Aligns the alignment subject to be flush with the alignment container's end edge in the appropriate axis.
self-start
Aligns the alignment subject to be flush with the edge of the alignment container corresponding to the alignment subject's start side in the appropriate axis.
self-end
Aligns the alignment subject to be flush with the edge of the alignment container corresponding to the alignment subject's end side in the appropriate axis.
flex-start
Aligns the alignment subject to be flush with the edge of the alignment container corresponding to the flex container's main-start or cross-start side, as appropriate. Only used in flex layout.
flex-end
Aligns the alignment subject to be flush with the edge of the alignment container corresponding to the flex container's main-end or cross-end side, as appropriate. Only used in flex layout.
left
Aligns the alignment subject to be flush with the alignment container's line-left or physical left edge, whichever is in the appropriate axis.
right
Aligns the alignment subject to be flush with the alignment container's line-right or physical right edge, whichever is in the appropriate axis.
legacy
Causes the value to effectively inherit into descendants.
legacy left
Aligns the alignment subject to be flush with the alignment container's line-left or physical left edge, whichever is in the appropriate axis.
legacy right
Aligns the alignment subject to be flush with the alignment container's line-right or physical right edge, whichever is in the appropriate axis.
legacy center
Centers the alignment subject within its alignment container.