Source

Layout Items

The Layout Items utilities control the cross-axis alignment of a single child inside a flex or grid layout. Where a layout's --layout-items property aligns all children at once, these classes override that alignment for one specific item.

Usage

Apply a .self-* class to a direct child of any flex or grid layout to align just that item on the cross axis.

<div class="flex" style="--layout-items: start">
  <div>Aligned to start</div>
  <div class="self-end">Aligned to end</div>
  <div class="self-stretch">Stretched</div>
</div>

Class Patterns

Class	Description
`.self-start`	Aligns the item to the start of the cross axis
`.self-center`	Centers the item on the cross axis
`.self-stretch`	Stretches the item across the cross axis
`.self-end`	Aligns the item to the end of the cross axis

← utilities: Indexed utilities: No Print →