Flex

Usage

import { Flex } from "@raystack/apsara";

Flex Props

Prop	Type	Default
`gap`	`"extra-small" \| "small" \| "medium" \| "large" \| "extra-large"`	-
`wrap`	`"nowrap" \| "wrap" \| "wrap-reverse"`	-
`justify`	`"start" \| "end" \| "center" \| "between"`	-
`align`	`"start" \| "end" \| "center" \| "baseline" \| "stretch"`	-
`direction`	`"row" \| "rowReverse" \| "column" \| "columnReverse"`	-
`className`	`string`	-

Examples

Basic Usage

<Flex gap="large">
  <Flex gap="medium" direction="column">
    <Button>Primary button</Button>
    <Button>Primary button</Button>
    <Button>Primary button</Button>
  </Flex>
  <Flex gap="medium" direction="column">
    <Button>Primary button</Button>
    <Button>Primary button</Button>
    <Button>Primary button</Button>
  </Flex>
</Flex>

Flex

Usage

Flex Props

Examples

Basic Usage

On this page