MapCSS

Flexbox & Grid

Align Items

Utilities for controlling how flex and grid items are positioned along a container's cross axis.

Basic usage

Stretch

Use items-stretch to stretch items to fill the container's cross axis:

01

02

03

<div className="flex **items-stretch** ...">
  <div className="py-4">01</div>
  <div className="py-12">02</div>
  <div className="py-8">03</div>
</div>

Start

Use items-start to align items to the start of the container's cross axis:

01

02

03

<div className="flex **items-start** ...">
  <div className="py-4">01</div>
  <div className="py-12">02</div>
  <div className="py-8">03</div>
</div>

Center

Use items-center to align items along the center of the container's cross axis:

01

02

03

<div className="flex **items-center** ...">
  <div className="py-4">01</div>
  <div className="py-12">02</div>
  <div className="py-8">03</div>
</div>

End

Use items-end to align items to the end of the container's cross axis:

01

02

03

<div className="flex **items-end** ...">
  <div className="py-4">01</div>
  <div className="py-12">02</div>
  <div className="py-8">03</div>
</div>

Baseline

Use items-baseline to align items along the container's cross axis such that all of their baselines align:

01

02

03

<div className="flex **items-baseline** ...">
  <div className="pt-2 pb-6">01</div>
  <div className="pt-8 pb-12">02</div>
  <div className="pt-12 pb-4">03</div>
</div>