FlexLayout

Row and Column are the primary layout components, providing a simple API for flexbox layouts without writing custom styles.

Row

Arranges children horizontally (flex-direction: row).

<Row gap="medium" padding="medium">
  <Badge />
  <Badge />
  <Badge />
</Row>

Column

Arranges children vertically (flex-direction: column).

<Column gap="medium" padding="medium">
  <Badge />
  <Badge />
  <Badge />
</Column>

Props

Both Row and Column accept the same props:

Prop	Type	Default	Description
gap	Gap	-	Space between children: "none", "xsmall", "small", "medium", "large", "xlarge"
padding	Padding	-	Internal padding (same values as gap)
justify	Justify	-	Main axis alignment: "start", "end", "center", "space-between", "space-around", "space-evenly"
align	Align	-	Cross axis alignment: "start", "end", "center", "stretch", "baseline"
grow	boolean	false	Allow element to grow (flex-grow: 1)
shrink	boolean	false	Allow element to shrink (flex-shrink: 1)
wrap	boolean	false	Allow items to wrap
basis	string \| number	-	Initial flex basis before growing or shrinking
surface	"primary" \| "secondary" \| "overlay"	-	Apply a semantic theme surface

Flex layouts use min-width: 0 by default, so growing children can shrink and wrap inside constrained rows without application-specific fixes.

<Row wrap gap="large">
  <Card grow basis={320}>First</Card>
  <Card grow basis={320}>Second</Card>
</Row>

<Column surface="primary" padding="large">
  Content
</Column>

Justify content

Control how items are distributed along the main axis:

<Row justify="start">...</Row>
<Row justify="center">...</Row>
<Row justify="end">...</Row>
<Row justify="space-between">...</Row>
<Row justify="space-around">...</Row>
<Row justify="space-evenly">...</Row>

Align items

Control how items are aligned on the cross axis:

<Row align="start">...</Row>
<Row align="center">...</Row>
<Row align="end">...</Row>
<Row align="stretch">...</Row>

Gap sizes

<Row gap="none">...</Row>    // 0px
<Row gap="xsmall">...</Row>  // 4px
<Row gap="small">...</Row>   // 8px
<Row gap="medium">...</Row>  // 12px
<Row gap="large">...</Row>   // 16px
<Row gap="xlarge">...</Row>  // 24px

Grow and shrink

Control how items expand or contract:

Fixed

Grows to fill space

Fixed

<Row>
  <BaseView>Fixed width</BaseView>
  <BaseView grow>Fills remaining space</BaseView>
  <BaseView>Fixed width</BaseView>
</Row>

Nesting layouts

Combine Row and Column for complex layouts:

<Column gap="medium" padding="medium">
  <Row justify="space-between" align="center">
    <Span>Title</Span>
    <Button color="secondary" onClick={() => {}}>Action</Button>
  </Row>
  <Row gap="medium">
    <Column grow gap="small">
      <Span>Main content</Span>
      <P>Description text here...</P>
    </Column>
    <Column gap="small">
      <Span>Sidebar</Span>
    </Column>
  </Row>
</Column>