align-items
Align flex items across a line or grid items within their block-axis areas.
Overview
| Class | Declarations |
|---|---|
items-normal | align-items: normal;
|
items-baseline | align-items: baseline;
|
items-center | align-items: center;
|
items-stretch | align-items: stretch;
|
items-start | align-items: start;
|
items-end | align-items: end;
|
items-flex-start | align-items: flex-start;
|
items-flex-end | align-items: flex-end;
|
items-self-start | align-items: self-start;
|
items-self-end | align-items: self-end;
|
align-items:<align> | align-items: <align>;
|
Examples
Align items on the cross axis
Use items-center to align the centers of flex items across a line. Here a 64px image sits beside a shorter caption. In a row flexbox, the cross axis follows the block direction; a column flexbox swaps the main and cross axes.
<div id="layout" class="flex items-center gap-md"> <img id="target" class="flex:none width:4rem height:4rem object-cover" src="/demo/landscape.svg" alt="Sun above layered mountains" /> <div id="peer" class="p-sm">Landscape study</div></div>Generated CSS
@layer utilities { .flex { display: flex } .items-center { align-items: center }}In Grid, align-items instead sets the default block-axis alignment inside each item’s grid area. It does not move the tracks themselves.
Align to the start or end
Compare items-start and items-end with the same 96px image and two-line caption. One aligns their top edges and the other their bottom edges in this horizontal writing mode.
<div id="layout" class="flex items-start gap-md"> <img id="target" class="flex:none width:6rem height:6rem object-cover" src="/demo/landscape.svg" alt="Sun above layered mountains" /> <div id="peer" class="min-w:0 p-sm">Landscape study<br>Canvas collection</div></div><div id="layout" class="flex items-end gap-md"> <img id="target" class="flex:none width:6rem height:6rem object-cover" src="/demo/landscape.svg" alt="Sun above layered mountains" /> <div id="peer" class="min-w:0 p-sm">Landscape study<br>Canvas collection</div></div>Stretch automatic-sized children
items-stretch stretches an item whose cross-axis size is automatic, subject to its minimum and maximum size. The blue item fills the first row’s 128px height; the violet item keeps its explicitly set 64px height.
<div id="layout" class="flex items-stretch gap-md h:8rem"> <div id="target" class="w:6rem p-sm">Auto height</div> <div id="peer" class="h:4rem w:6rem p-sm">64px height</div></div><div id="layout" class="flex items-stretch gap-md"> <div id="target" class="w:6rem p-sm">Auto height</div> <div id="peer" class="width:6rem height:6rem p-sm">96px height</div></div>The second container has no explicit height. Its taller sibling establishes a 96px line, and the automatic-sized item stretches to match it. A definite container height is not required.
Align text baselines
Use items-baseline to put the first text baselines of differently sized flex items on the same line. Their top and bottom edges need not match. Both labels use a unitless line height of 1 so the different text sizes remain easy to compare.
<div id="layout" class="flex items-baseline gap-sm"> <span id="target" class="font-5xl leading:1">24</span> <span id="peer" class="font-sm leading:1">messages</span></div>Use align-self to override the shared alignment for one item.
Apply conditionally
Use conditional queries to change alignment at a real viewport width. The blue item has an automatic height: it starts at the top, centers from sm, then stretches from lg. The violet item keeps a fixed 64px height, including in the stretch state.
<div id="layout" class="flex items-start gap-md h:8rem items-center@sm items-stretch@lg"> <div id="target" class="w:6rem p-sm">Auto height</div> <div id="peer" class="h:4rem w:6rem p-sm">64px height</div></div>