Align Items

Use items-* utilities to control how flex and grid items are positioned along the container’s cross axis.

Start

Use items-start to align items against the start of the container’s cross axis.

Style('flex items-start ...', children: [
  Style('py-4', child: Text('01')),
  Style('py-12', child: Text('02')),
  Style('py-8', child: Text('03')),
])

Center

Use items-center to align items along the center of the container’s cross axis.

Style('flex items-center ...', children: [
  Style('py-4', child: Text('01')),
  Style('py-12', child: Text('02')),
  Style('py-8', child: Text('03')),
])

End

Use items-end to align items against the end of the container’s cross axis.

Style('flex items-end ...', children: [
  Style('py-4', child: Text('01')),
  Style('py-12', child: Text('02')),
  Style('py-8', child: Text('03')),
])

Baseline

Use items-baseline to align items along the alphabetic baseline of their first text run. Asymmetric pt-* and pb-* paddings make the shared baseline visible across tiles of varying intrinsic heights.

Style('flex items-baseline ...', children: [
  Style('pt-2 pb-6', child: Text('01')),
  Style('pt-8 pb-12', child: Text('02')),
  Style('pt-12 pb-4', child: Text('03')),
])

Stretch

Use items-stretch to make items fill the container’s cross axis.

Style('flex items-stretch ...', children: [
  Style('py-4', child: Text('01')),
  Style('py-12', child: Text('02')),
  Style('py-8', child: Text('03')),
])

Class reference

Class	Description
items-start	Align items to the start of the cross axis.
items-center	Align items to the center of the cross axis.
items-end	Align items to the end of the cross axis.
items-baseline	Align items to the alphabetic baseline of their first text run.
items-stretch	Stretch items to fill the cross axis.
items-baseline-last	(parity omitted)
items-center-safe, items-end-safe	(parity omitted)

Parity omissions

• items-baseline-last — Flutter has no concept of “last baseline”. The dominant baseline is always the first text baseline of each child.
• items-center-safe, items-end-safe — the CSS safe keyword falls back to start when items would overflow the container; Flutter’s layout has no overflow-fallback alignment concept.
• When the flex container wraps (flex-wrap), items-baseline falls back to start. Flutter’s Wrap widget has no baseline run alignment.
• items-stretch only fills the cross axis when each child has an explicit min-h-* (or h-*) — decorated children with no explicit height shrink-wrap to their content via the library’s _applyShrinkWrapHeight quirk. The align-items-stretch example above adds min-h-48 to the children to make the stretch visible.
• items-baseline aligns baselines near the top of the row in this library (Flutter’s RenderFlex positions children so the first baseline reaches max(baseline_from_top) of all children). Tailwind aligns near the bottom of a shrink-wrapped container; the resulting visual differs slightly even though both render the baselines on a common Y.