Flex Grow

Utilities for controlling how flex items grow to fill available space.

Allow items to grow

Use grow to allow a flex item to expand and fill any available space between fixed-width siblings. Use grow-<number> (e.g. grow-2, grow-3) to give an item a larger share of remaining space than its siblings.

Style('flex ...', children: [
  Style('size-14 flex-none ...', child: Text('01')),
  Style('size-14 grow ...', child: Text('02')),
  Style('size-14 flex-none ...', child: Text('03')),
])

Prevent items from growing

Use grow-0 to prevent a flex item from expanding. Adjacent siblings with grow continue to absorb the remaining space, leaving the grow-0 tile fixed at its declared size.

Style('flex ...', children: [
  Style('size-14 grow ...', child: Text('01')),
  Style('size-14 grow-0 ...', child: Text('02')),
  Style('size-14 grow ...', child: Text('03')),
])

Class reference

Class	Description
grow	Allow a flex item to grow to fill available space (flex-grow: 1).
grow-<number>	Set the flex grow factor to <number> (e.g. grow-2, grow-3, grow-7).
grow-0	Prevent a flex item from growing (flex-grow: 0).
grow-[<value>]	Arbitrary grow factor — a non-negative integer, e.g. grow-[2].

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