Limited support Useful when justify-self in block layouts helps structure space, flow, or sizing without relying on brittle manual adjustments.

justify-self in block layouts

The justify-self CSS property aligns an item along a container's inline axis in block layouts, like it does in grid layouts. Likewise, the justify-items property sets a default justify-self value for all items in a container in a block layout.

Layout

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
block context
Experimental
130
130
130
block context
Experimental

Supported in Block Layout
130
130
130
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

CSS 
.container {
  justify-items: center;
}
.item {
  justify-self: end;
}

Live demo

justify-self: center

CSS Justify-self: center demo.

PreviewFullscreen

justify-self: end

CSS Justify-self: end demo.

PreviewFullscreen

justify-self: start

CSS Justify-self: start demo.

PreviewFullscreen

Use cases

  • Component layout

    Use justify-self in block layouts to create more predictable spacing and placement inside reusable UI patterns.

  • Responsive structure

    Adapt containers and flow rules so layouts stay stable across viewport changes.

Cautions

  • Test layout rules with real content, long labels, and small screens before depending on them broadly.
  • Prefer simpler layout primitives if they already solve the problem clearly.

Accessibility

  • Layout choices should preserve reading order and support zoom without clipping.
  • Avoid visually clever positioning that makes content harder to follow with keyboard or assistive tools.

Related links