align-self

Override cross-axis flex alignment or block-axis grid alignment for one item.

Overview

Examples

Override alignment for one item

Use self-center to override the parent’s items-start alignment for just the blue item. In this 144px row, the 64px item centers vertically while its 48px sibling remains at the top.

<div id="layout" class="flex items-start gap-md h:9rem">  <div id="target" class="self-center h:4rem w:6rem p-sm">Self center</div>  <div id="peer" class="h:3rem w:6rem p-sm">Parent start</div></div>

@layer utilities {  .flex {    display: flex  }  .items-start {    align-items: start  }  .self-center {    align-self: center  }}

For a flex item, align-self acts on the cross axis. For a grid item, it acts along the block axis inside that item’s grid area.

Stretch a single item

self-stretch fills the line’s cross size when that item’s own cross size is automatic. The blue item stretches to 96px while the parent keeps its other items centered.

<div id="layout" class="flex items-center gap-md">  <div id="target" class="self-stretch w:6rem p-sm">Auto height</div>  <div id="peer" class="width:6rem height:6rem p-sm">96px height</div>  <div id="item-3" class="h:3rem w:4rem p-sm">48px</div></div>

An explicit height prevents stretching in this row. Use align-items when every item should follow the same default.

Apply conditionally

Use conditional queries to change alignment at a real viewport width. self-auto follows the parent’s items-end value. From sm, self-center overrides that default for the blue item; its sibling stays at the bottom.

<div id="layout" class="flex items-end gap-md h:9rem">  <div id="target" class="self-auto h:4rem w:6rem p-sm self-center@sm">Target</div>  <div id="peer" class="h:3rem w:6rem p-sm">Parent end</div></div>