logo

eola Style Guide 2024: Flex

Flex

The Flex component aims to provide an efficient way to layout, align and distribute space among items in a container. It uses the styled-system to take all the props for flexbox, space, width, minWidth and maxWidth.

Examples

Flex

<Flex flexWrap="wrap" width="100%">
  <Flex justifyContent="center" width="100%" gap={3}>
    {exampleDivs}
  </Flex>
  <Flex justifyContent="space-between" width="100%" mt={10}>
    {exampleDivs}
  </Flex>
</Flex>