Flex Direction

Utilities for controlling the direction in which flex items are placed in the flex container.

Row

Use flex-row to position flex items horizontally (left to right).

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

Row reversed

Use flex-row-reverse to position flex items horizontally in reverse order (right to left).

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

Column

Use flex-col to position flex items vertically (top to bottom).

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

Column reversed

Use flex-col-reverse to position flex items vertically in reverse order (bottom to top).

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

Class reference

Class	Description
flex-row	Position flex items horizontally (left to right)
flex-row-reverse	Position flex items horizontally in reverse (right to left)
flex-col	Position flex items vertically (top to bottom)
flex-col-reverse	Position flex items vertically in reverse (bottom to top)

Note on space-x-reverse / space-y-reverse: These Tailwind utilities flip the side of the margin produced by space-x-* / space-y-* so it sits on the opposite side of each child (typically paired with flex-row-reverse in CSS). They are accepted as no-ops in this library because space-x-* / space-y-* map to Flutter’s symmetric Row.spacing / Column.spacing — there is no margin side to flip. Reversal of child order is handled by flex-row-reverse / flex-col-reverse via Flutter’s TextDirection.rtl / VerticalDirection.up, which automatically produces the correct gap direction.