Flex

Utilities for controlling how flex items both grow and shrink.

Grow and ignore initial size

Use flex-1 (or any flex-<number>) to allow an item to grow and shrink, ignoring its declared size. Each flex-1 item fills an equal share of the remaining space.

Style('flex', children: [
  Style('w-14 flex-none ...', child: Text('01')),
  Style('w-64 flex-1 ...', child: Text('02')),
  Style('w-32 flex-1 ...', child: Text('03')),
])

Shrink only, respecting initial size

Use flex-initial to let an item shrink if the container is too narrow but never grow past its declared size. Each item stays at its stated w-* when space allows.

Style('flex', children: [
  Style('w-14 flex-none ...', child: Text('01')),
  Style('w-24 flex-initial ... sm:w-64', child: Text('02')),
  Style('w-14 flex-initial ... sm:w-32', child: Text('03')),
])

Grow and shrink, respecting initial size

Use flex-auto to let items grow and shrink while taking their declared size into account. Items keep their w-* as a preferred minimum — loose fit doesn’t force them to fill extra space.

Style('flex ...', children: [
  Style('w-14 flex-none ...', child: Text('01')),
  Style('w-64 flex-auto ...', child: Text('02')),
  Style('w-32 flex-auto ...', child: Text('03')),
])

Prevent growing or shrinking

Use flex-none to fix an item at its initial size — it never grows or shrinks, even when other sibling items (e.g. flex-1) want to fill remaining space.

Style('flex ...', children: [
  Style('w-14 flex-none ...', child: Text('01')),
  Style('w-32 flex-none ...', child: Text('02')),
  Style('flex-1 ...', child: Text('03')),
])

Class reference

Class	Description
flex-<number>	Grow by <number>, shrink by 1, ignore initial size (flex: <number> 1 0%). Examples: flex-1, flex-2, flex-3.
flex-<fraction>	Grow and shrink with fractional basis (flex: 1 1 <fraction>). Examples: flex-1/2, flex-2/3.
flex-auto	Allow item to grow and shrink, respecting its initial size (flex: 1 1 auto).
flex-initial	Prevent growth, allow shrink, respect initial size (flex: 0 1 auto).
flex-none	Fix item at its initial size — no grow, no shrink (flex: none).
flex-[<value>]	Arbitrary shorthand — a single number (flex-[2]) or a grow_shrink_basis triple (flex-[2_2_0%], flex-[1_1_auto]).

The CSS-variable form flex-(--custom-property) is resolved against theme-defined StyleThemeData.customProperties — it behaves like flex-[<value>] when the theme defines the property. Cascade-inherited or JS-set CSS variables remain out of scope.