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:

• Space Props
• Layout Props
• Color Props
• Flexbox Props
• Position Props
• Border Props

Additional Props

Prop	Type	Description
gap	number \| string	Space between flex items