<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>

Usage with refs

If you need to pass a ref to Flex, use a RefFlex:

import { useRef } from 'react'
import { RefFlex } from 'componentry'

function LayoutWithRef() {
  const ref = useRef(null)
  return <RefFlex ref={ref} p={4}></RefFlex>
}

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>

Props