import { Flex } from "@chakra-ui/react" import { DecorativeBox } from "compositions/lib/decorative-box" const Demo = () => { return ( <Flex gap="4"> <DecorativeBox height="10" /> <DecorativeBox height="10" /> <DecorativeBox height="10" /> </Flex> ) } Usage
import { Flex, Spacer } from "@chakra-ui/react"<Flex> <div /> <div /> </Flex>Examples
Direction
Use the direction or flexDirection prop to change the direction of the flex
import { Flex } from "@chakra-ui/react" import { DecorativeBox } from "compositions/lib/decorative-box" const Demo = () => { return ( <Flex gap="4" direction="column"> <DecorativeBox height="10" /> <DecorativeBox height="10" /> <DecorativeBox height="10" /> </Flex> ) } Align
Use the align or alignItems prop to align the children along the cross axis.
import { Flex } from "@chakra-ui/react" import { DecorativeBox } from "compositions/lib/decorative-box" const Demo = () => { return ( <Flex gap="4" align="center"> <DecorativeBox height="4" /> <DecorativeBox height="8" /> <DecorativeBox height="10" /> </Flex> ) } Justify
Use the justify or justifyContent prop to align the children along the main axis.
flex-start
center
flex-end
space-between
import { Flex } from "@chakra-ui/react" import { DecorativeBox } from "compositions/lib/decorative-box" const Demo = () => { return ( <Flex direction="column" gap="8"> <Flex gap="4" justify="flex-start"> <DecorativeBox height="10" width="120px" /> <DecorativeBox height="10" width="120px"> flex-start </DecorativeBox> <DecorativeBox height="10" width="120px" /> </Flex> <Flex gap="4" justify="center"> <DecorativeBox height="10" width="120px" /> <DecorativeBox height="10" width="120px"> center </DecorativeBox> <DecorativeBox height="10" width="120px" /> </Flex> <Flex gap="4" justify="flex-end"> <DecorativeBox height="10" width="120px" /> <DecorativeBox height="10" width="120px"> flex-end </DecorativeBox> <DecorativeBox height="10" width="120px" /> </Flex> <Flex gap="4" justify="space-between"> <DecorativeBox height="10" width="120px" /> <DecorativeBox height="10" width="120px"> space-between </DecorativeBox> <DecorativeBox height="10" width="120px" /> </Flex> </Flex> ) } Order
Use the order prop to change the order of the children.
1
2
3
import { Flex } from "@chakra-ui/react" import { DecorativeBox } from "compositions/lib/decorative-box" const Demo = () => { return ( <Flex gap="4"> <DecorativeBox height="10" order="1"> 1 </DecorativeBox> <DecorativeBox height="10" order="3"> 2 </DecorativeBox> <DecorativeBox height="10" order="2"> 3 </DecorativeBox> </Flex> ) } Auto Margin
Apply margin to a flex item to push it away from its siblings.
import { Flex } from "@chakra-ui/react" import { DecorativeBox } from "compositions/lib/decorative-box" const Demo = () => { return ( <Flex gap="4" justify="space-between"> <DecorativeBox height="10" width="40" /> <DecorativeBox height="10" width="40" marginEnd="auto" /> <DecorativeBox height="10" width="40" /> </Flex> ) } Spacer
Use the Spacer component to create flexible space between flex items. It will expand to fill all available space, pushing items to opposite ends.
Box 1
Box 2
import { Box, Flex, Spacer } from "@chakra-ui/react" const Demo = () => { return ( <Flex> <Box p="4" bg="red.400" color="white"> Box 1 </Box> <Spacer /> <Box p="4" bg="green.400" color="white"> Box 2 </Box> </Flex> ) } Wrap
Use the wrap or flexWrap prop to wrap the children when they overflow the parent.
import { Flex } from "@chakra-ui/react" import { DecorativeBox } from "compositions/lib/decorative-box" const Demo = () => { return ( <Flex gap="4" wrap="wrap" maxW="500px"> <DecorativeBox height="10" width="200px" /> <DecorativeBox height="10" width="200px" /> <DecorativeBox height="10" width="200px" /> </Flex> ) } Props
| Prop | Default | Type |
|---|---|---|
align | SystemStyleObject['alignItems'] | undefined | |
justify | SystemStyleObject['justifyContent'] | undefined | |
wrap | SystemStyleObject['flexWrap'] | undefined | |
direction | SystemStyleObject['flexDirection'] | undefined | |
basis | SystemStyleObject['flexBasis'] | undefined | |
grow | SystemStyleObject['flexGrow'] | undefined | |
shrink | SystemStyleObject['flexShrink'] | undefined | |
inline | boolean | undefined | |
as | React.ElementTypeThe underlying element to render. | |
asChild | booleanUse the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. |