項目對齊align-items

Controlling how items are aligned along its cross axis.

Overview

Examples

Align items on the cross axis

Use items-* utilities to align flex or grid items on the cross axis. In a default row flexbox, the cross axis is vertical.

<div class="flex items-center gap:sm">    <img class="size:10x round" src="..." alt="" />    <span>Aron</span></div>

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

Align to the start or end

Use items-start or items-end when children should align to one edge of the cross axis.

<article class="flex items-start gap:md">    <img class="size:12x" src="..." alt="" />    <p class="m:0">Longer text can wrap without vertically centering against the media.</p></article>

Stretch children

Use items-stretch when children should fill the cross size of the container. The container needs a definite cross size for the stretch to be visible.

<div class="flex items-stretch h:32x gap:sm">    <div>One</div>    <div>Two</div></div>

Align text baselines

Use items-baseline when inline text in differently sized children should sit on the same baseline.

<div class="flex items-baseline gap:sm">    <span class="font:2xl">24</span>    <span class="font:sm">messages</span></div>

For one item only, use align-self.

Apply conditionally

Apply styles based on different states using selectors and conditional queries.

<div class="items-start items-center@sm items-stretch@lg items-start@print">...</div>

Use justify-content for the main axis.