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

01
02
03
<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

Name
Description
align

Sets an `align-items` style

"start" | "end" | "center" | "baseline" | "stretch"
direction

Sets a `flex-direction` flex style

"column" | "column-reverse" | "row-reverse" | "row"
justify

Sets a `justify-content` style

"start" | "end" | "center" | "space-between" | "space-around" | "space-evenly"
wrap

Sets a `flex-wrap` flex style

"wrap" | "nowrap" | "wrap-reverse"