Skip to main content

Flexbox

Flexbox is a layout component that implements CSS Flexbox with additional convenience features like gap support.

Usage

<Flexbox 
gap={4}
alignItems="center"
justifyContent="space-between"
>
<Box>Item 1</Box>
<Box>Item 2</Box>
</Flexbox>

Column Layout

<Flexbox 
flexDirection="column"
gap={2}
>
<Box>Top</Box>
<Box>Middle</Box>
<Box>Bottom</Box>
</Flexbox>

Props

Flexbox accepts all styled-system props from the following categories:

Additional Props

PropTypeDescription
gapnumber \| stringSpace between flex items