Justify Self Property
Last updated: 2026-09-13
justify-self Justify Self Property
The justify-self property sets the inline axis alignment of a single item, overriding the container’s justify-items default. It applies mainly to grid layouts and has no effect in flexbox. With it, one item can align independently inside its cell without affecting how the other items align.
| Category | |
|---|---|
| Initial Value | auto |
| Inherited | No |
| Applies To | |
| Animation Type | |
| CSS Version | CSS3 |
| Status | Standard |
📝 Syntax
justify-self: auto | normal | stretch | start | end | self-start | self-end | center | left | right | baseline;⚙️ Values
| Value | Type | Description |
|---|---|---|
auto | normal | stretch | start | end | center | left | right | Keyword | Single item inline axis alignment |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| justify-self | ✓ v29 | ✓ v12 | ✓ v28 | ✓ v9 | ✓ v17 |
| Supported in all major browsers | |||||
Warning： justify-self has no effect in flexbox; it only applies to grid. In a flex layout, use align-self to align a single item on the cross axis.
Tip： justify-self: auto inherits the container’s justify-items setting; justify-self: normal behaves like stretch.
❓ FAQ
QWhat is the difference between justify-self and justify-items?
Ajustify-items is set on the grid container and specifies the default horizontal alignment of every grid item. justify-self is set on a single grid item and overrides that item’s default. The default of justify-self is auto, which simply inherits justify-items from the container, so an unset item always follows the container default. justify-self has higher priority than justify-items, which is ideal when a few items need a special alignment inside their cells while the rest keep the default.
QWhy doesn’t justify-self work in flexbox?
AFlexbox has no grid cells; the items sit directly in the container, so justify-self has nothing to apply to. In flexbox, aligning a single item is usually done with margin: auto or with a nested flex container, for example justify-content: space-between combined with margin-left: auto to push one item to the right. If you only need to push one item to the far edge, the auto margin trick is often simpler and works in every flex-capable browser.
QWhat is the difference between justify-self: center and margin: auto?
Ajustify-self: center is the alignment provided by the Box Alignment spec and centers the grid item horizontally within its cell. margin: auto achieves the same visual result because the auto margins absorb the leftover space, but in grid it also absorbs space on both sides, which can fight with other alignment values. justify-self has clearer semantics, keeps the two axes independent, and also supports start, end, stretch and other keywords, so it is the recommended way inside grid layouts.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
Justify Items
Sets the default inline axis alignment of all items
Align Self
Overrides the cross-axis alignment of a single item
