Align Content

Use content-* utilities to control how runs (rows) are positioned along the cross axis of a wrapped flex or multi-row grid container.

Start

Use content-start to pack runs against the start of the container’s cross axis.

Style('grid h-56 grid-cols-3 content-start gap-4 ...', children: [
  Text('01'),
  Text('02'),
  Text('03'),
  Text('04'),
  Text('05'),
])

Center

Use content-center to center runs along the container’s cross axis.

Style('grid h-56 grid-cols-3 content-center gap-4 ...', children: [
  Text('01'),
  Text('02'),
  Text('03'),
  Text('04'),
  Text('05'),
])

End

Use content-end to pack runs against the end of the container’s cross axis.

Style('grid h-56 grid-cols-3 content-end gap-4 ...', children: [
  Text('01'),
  Text('02'),
  Text('03'),
  Text('04'),
  Text('05'),
])

Space between

Use content-between to distribute runs evenly along the cross axis with the first at the start and the last at the end.

Style('grid h-56 grid-cols-3 content-between gap-4 ...', children: [
  Text('01'),
  Text('02'),
  Text('03'),
  Text('04'),
  Text('05'),
])

Space around

Use content-around to distribute runs along the cross axis with equal space around each one.

Style('grid h-56 grid-cols-3 content-around gap-x-4 ...', children: [
  Text('01'),
  Text('02'),
  Text('03'),
  Text('04'),
  Text('05'),
])

Space evenly

Use content-evenly to distribute runs along the cross axis with equal space between each run and between the first/last run and the container edges.

Style('grid h-56 grid-cols-3 content-evenly gap-x-4 ...', children: [
  Text('01'),
  Text('02'),
  Text('03'),
  Text('04'),
  Text('05'),
])

Class reference

Class	Description
content-start	Pack runs against the start of the cross axis.
content-center	Pack runs in the center of the cross axis.
content-end	Pack runs against the end of the cross axis.
content-between	Distribute runs evenly; first at start, last at end.
content-around	Distribute runs with equal space around each.
content-evenly	Distribute runs with equal space between each and the container edges.
content-stretch	(parity omitted — silently downgrades to content-start)
content-normal	(parity omitted)
content-baseline	(parity omitted)

Parity omissions

• content-stretch, content-normal, content-baseline — Flutter’s Wrap.runAlignment only supports start, end, center, spaceBetween, spaceAround, and spaceEvenly. The resolver silently downgrades content-stretch to WrapAlignment.start; content-normal and content-baseline are not parsed.
• The container needs an explicit cross-axis size (e.g. h-40) for content-* to have visible slack to distribute. Without one, decorated containers shrink-wrap to content height and the runs render identically across all content-* values.