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 } 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>
)
}
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'] | |
justify | SystemStyleObject['justifyContent'] | |
wrap | SystemStyleObject['flexWrap'] | |
direction | SystemStyleObject['flexDirection'] | |
basis | SystemStyleObject['flexBasis'] | |
grow | SystemStyleObject['flexGrow'] | |
shrink | SystemStyleObject['flexShrink'] | |
inline | boolean |