Align Self

Use self-* utilities to override an individual item’s cross-axis alignment, ignoring the container’s items-* value.

Start

Use self-start to align an individual item against the start of the container’s cross axis.

Style('flex items-stretch ...', children: [
  Text('01'),
  Style('self-start ...', child: Text('02')),
  Text('03'),
])

Center

Use self-center to align an individual item along the center of the container’s cross axis.

Style('flex items-stretch ...', children: [
  Text('01'),
  Style('self-center ...', child: Text('02')),
  Text('03'),
])

End

Use self-end to align an individual item against the end of the container’s cross axis.

Style('flex items-stretch ...', children: [
  Text('01'),
  Style('self-end ...', child: Text('02')),
  Text('03'),
])

Auto

Use self-auto to revert to the value of the container’s items-* setting (CSS default). The override is a no-op — the child inherits whatever the container declares.

Style('flex items-stretch ...', children: [
  Text('01'),
  Style('self-auto ...', child: Text('02')),
  Text('03'),
])

Stretch

Use self-stretch to opt an individual item into the parent’s items-stretch behavior. When the parent already stretches all children, the override is visually identical to the surrounding tiles.

Style('flex items-stretch ...', children: [
  Text('01'),
  Style('self-stretch ...', child: Text('02')),
  Text('03'),
])

Baseline

Use self-baseline to align items by the alphabetic baseline of their first text run. When EVERY direct flex child carries self-baseline (and the container has no items-*), the renderer promotes the parent’s crossAxisAlignment to CrossAxisAlignment.baseline. Asymmetric pt-* / pb-* make the shared baseline visible across tiles of varying intrinsic heights.

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

Class reference

Class	Description
self-auto	Defer to the parent’s items-* value (CSS default).
self-start	Align this item to the start of the cross axis.
self-center	Align this item to the center of the cross axis.
self-end	Align this item to the end of the cross axis.
self-stretch	Stretch this item to fill the cross axis.
self-baseline	Align this item by its first text-run baseline (all-children opt-in).
self-baseline-last	(parity omitted)
self-center-safe, self-end-safe	(parity omitted)

Parity omissions

• self-baseline-last — Flutter has no last-baseline concept; the dominant baseline is always the first text baseline of each child.
• self-center-safe, self-end-safe — the CSS safe keyword falls back to start when an item would overflow; Flutter’s layout has no overflow-fallback alignment concept.
• Mixed self-baseline — Flutter’s RenderFlex applies a single CrossAxisAlignment to all children of a Row/Column, so the renderer can only promote when EVERY direct child carries self-baseline. If only some children opt in, the class is parsed but has no visual effect (the parent’s items-* wins). Implementing the mixed case would require a custom RenderFlex and is out of scope.