Dowe

LAYOUT

Flex

Flex arranges children along one axis with predictable direction, alignment, and spacing.

DIRECTION: ROW

Place items side by side

Row is the default direction. Gap separates each child along the horizontal axis.

Item 1

Item 2

Item 3

Flex direction:"row" justify:"center" align:"center" gap:4
  Box bg:"success" color:"surface" p:4 rounded:"sm"
    Text
      "Item 1"
  Box bg:"primary" color:"surface" p:4 rounded:"sm"
    Text
      "Item 2"
  Box bg:"muted" p:4 rounded:"sm"
    Text
      "Item 3"

DIRECTION: COLUMN

Stack items vertically

Column changes the main axis while justify, align, and gap keep the same target-neutral meaning.

Item 1

Item 2

Item 3

Flex direction:"column" align:"center" gap:4
  Box bg:"success" color:"surface" p:4 rounded:"sm"
    Text
      "Item 1"
  Box bg:"primary" color:"surface" p:4 rounded:"sm"
    Text
      "Item 2"
  Box bg:"muted" p:4 rounded:"sm"
    Text
      "Item 3"

RESPONSIVE

Change direction by width

Use a responsive direction object to stack content on small screens and switch to a row from md.

Flex direction:{ xs:"column" md:"row" } gap:4
  Text
    "First item"
  Text
    "Second item"

API

Props

Flex also accepts the applicable common spacing, sizing, visibility, and accessibility props.

Prop	Type	Default
No data There are no records to display

No data