<Flex />

Flex is a layout component that makes creating flex layouts easy.

Usage

Flex will render a div with display: flex by default, creating a flex container.

<Flex backgroundColor='primary-100'>
  <Block backgroundColor='primary-200' p={4} m={1}>
    01
  </Block>
  <Block backgroundColor='primary-200' p={4} m={1}>
    02
  </Block>
  <Block backgroundColor='primary-200' p={4} m={1}>
    03
  </Block>
</Flex>

Shorthand props

Flex provides shorthand props for common flex layout values for convenience:

• align for alignItems
• direction for flexDirection
• wrap for flexWrap
• justify for justifyContent

// With utility props
<Block display="flex" flexDirection="column" justifyContent="center">
  Utility Props
</Block>

// Equivalent Flex
<Flex direction="column" justify="center">
  Flex Props
</Flex>