Flex Wrap

Utilities for controlling whether flex items wrap onto multiple lines or stay on a single line.

Don’t wrap

Use flex-nowrap to prevent flex items from wrapping — items stay on a single line even when the container is too narrow, overflowing if necessary.

Style('flex flex-nowrap', children: [
  Text('01'),
  Text('02'),
  Text('03'),
])

Wrap normally

Use flex-wrap to allow flex items to wrap onto multiple lines. New rows stack top-to-bottom along the cross axis — the first row is at the top.

Style('flex flex-wrap', children: [
  Text('01'),
  Text('02'),
  Text('03'),
])

Wrap reversed

Use flex-wrap-reverse to wrap flex items in the reverse direction along the cross axis — the first row is at the bottom, not the top.

Style('flex flex-wrap-reverse', children: [
  Text('01'),
  Text('02'),
  Text('03'),
])

Class reference

Class	Description
flex-nowrap	Prevent flex items from wrapping; items may overflow the container
flex-wrap	Allow flex items to wrap onto multiple lines (new rows below / columns to the right)
flex-wrap-reverse	Allow flex items to wrap onto multiple lines in the reverse direction (new rows above / columns to the left)