Flex

Component for creating flex layouts.

Usage

<Flex gap="4">
  <Box className="w-20 h-20">
    <DecorativeBox />
  </Box>
  <Box className="w-20 h-20">
    <DecorativeBox />
  </Box>
  <Box className="w-20 h-20">
    <DecorativeBox />
  </Box>
  <Box className="w-20 h-20">
    <DecorativeBox />
  </Box>
  <Box className="w-20 h-20">
    <DecorativeBox />
  </Box>
</Flex>

API Reference

This component is based on the div element and supports common margin props.

Use these props to create flex layouts.

Prop	Type	Default
asChild	boolean	false
display	`none` \| `inline-flex` \| `flex`	`flex`
direction	`row` \| `column` \| `row-reverse` \| `column-reverse`	No default value
align	`start` \| `center` \| `end` \| `baseline` \| `stretch`	No default value
justify	`start` \| `center` \| `end` \| `between`	`start`
wrap	`nowrap` \| `wrap` \| `wrap-reverse`	No default value
gap	enum

The props are shared between Box, Flex, Grid, Container and Section layout components.

Box Grid