Flex

This is the flex container component. It will help to define the number of columns that will be used in the grid. You can also define the gap between the columns. All values are responsive.

API reference

The grid component also accepts all the spacing props from the Box component.

Common questions

Can I stack horizontally?

The Flex component only allows for stacking elements vertically. If you want to create a column layout, please use the Grid component.

<Grid columns={3} gap="4">
  <Box>Hello World</Box>
  <Box>Hello World</Box>
  <Box>Hello World</Box>
</Grid>

Examples

Simple

A simple example of how to use the Flex component.

<Flex>
  <Box>Hello World</Box>
  <Box>Hello World</Box>
  <Box>Hello World</Box>
</Flex>

Responsive

The Flex component also supports responsive values, making it easy to create responsive designs.

<Flex gap={{ xs: 'sm', md: 'md' }}>
  <Box>Hello World</Box>
  <Box>Hello World</Box>
  <Box>Hello World</Box>
</Flex>

Align

The Flex component also supports responsive alignment, making it easy to create responsive designs.

<Flex align={{ xs: 'left', md: 'center' }}>
  <Box>Hello World</Box>
  <Box>Hello World</Box>
  <Box>Hello World</Box>
</Flex>