Flex is a layout component that makes creating flex layouts easy.
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>
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>
}
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>
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"