Justify Content

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

Start

Use justify-start to pack items against the start of the container’s main axis.

Style('flex justify-start ...', children: [
  Text('01'),
  Text('02'),
  Text('03'),
])

Center

Use justify-center to pack items along the center of the container’s main axis.

Style('flex justify-center ...', children: [
  Text('01'),
  Text('02'),
  Text('03'),
  Text('04'),
])
Style('flex justify-center-safe ...', children: [
  Text('01'),
  Text('02'),
  Text('03'),
  Text('04'),
])

End

Use justify-end to pack items against the end of the container’s main axis.

Style('flex justify-end ...', children: [
  Text('01'),
  Text('02'),
  Text('03'),
  Text('03'),
])
Style('flex justify-end-safe ...', children: [
  Text('01'),
  Text('02'),
  Text('03'),
  Text('03'),
])

Space between

Use justify-between to distribute items so the first sits at the start, the last sits at the end, and the remaining space is split evenly between them.

Style('flex justify-between ...', children: [
  Text('01'),
  Text('02'),
  Text('03'),
])

Space around

Use justify-around to distribute items along the main axis with equal space around each one.

Style('flex justify-around ...', children: [
  Text('01'),
  Text('02'),
  Text('03'),
])

Space evenly

Use justify-evenly to distribute items along the main axis so the gaps between them — and between the first/last item and the container edge — are all equal.

Style('flex justify-evenly ...', children: [
  Text('01'),
  Text('02'),
  Text('03'),
])

Class reference

Class	Description
justify-start	Pack items against the start of the main axis.
justify-center	Pack items along the center of the main axis.
justify-end	Pack items against the end of the main axis.
justify-between	Distribute items evenly; first item at start, last at end.
justify-around	Distribute items evenly with equal space around each.
justify-evenly	Distribute items with equal space between each and the container edges.
justify-stretch	(parity omitted)
justify-normal	(parity omitted)
justify-baseline	(parity omitted)
justify-center-safe, justify-end-safe	(parity omitted)

Parity omissions

• justify-stretch, justify-normal, justify-baseline — Flutter’s MainAxisAlignment has no stretch / normal / baseline value, so these have no equivalent in the flex renderer.
• justify-center-safe, justify-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.