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
css.properties.justify-items.block_context
Experimental
130
130
130
CSS property
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