justify-self#

#Introduction

The CSS justify-self property sets the way a box is justified inside its alignment container along the appropriate axis. It aligns the items inside their grid areas on the inline axis.

#Examples

css-apisrc/justify-self/App.tsx

Code

Preview

#Syntax

justify-self: auto;
justify-self: stretch;
justify-self: center;
justify-self: start;
justify-self: end;

#Values

#auto

Default value. The value used is the value of the justify-items property of the parents box.

#stretch

If the combined size of the items 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.

#center

The items are packed flush to each other toward the center of the alignment container.

#start

The item is packed flush to each other toward the start edge of the alignment container in the appropriate axis.

#end

The item is packed flush to each other toward the end edge of the alignment container in the appropriate axis.

#Formal definition

#Formal syntax

justify-self = auto | stretch | center | start | end

#Difference with the web

mdn: justify-self

1. normal is not supported. Initial value is stretch.
2. self-start, self-end, left, right, flex-start, flex-end are not supported.

#Compatibility