import { Flex } from "@chakra-ui/react"
import { DecorativeBox } from "compositions/lib/decorative-box"
export const FlexBasic = () => {
return (
<Flex gap="4">
<DecorativeBox height="10" />
<DecorativeBox height="10" />
<DecorativeBox height="10" />
</Flex>
)
}
import { Flex } from "@chakra-ui/react"<Flex>
<div />
<div />
</Flex>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"
export const FlexWithDirection = () => {
return (
<Flex gap="4" direction="column">
<DecorativeBox height="10" />
<DecorativeBox height="10" />
<DecorativeBox height="10" />
</Flex>
)
}
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"
export const FlexWithAlign = () => {
return (
<Flex gap="4" align="center">
<DecorativeBox height="4" />
<DecorativeBox height="8" />
<DecorativeBox height="10" />
</Flex>
)
}
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"
export const FlexWithJustify = () => {
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>
)
}
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"
export const FlexWithOrder = () => {
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>
)
}
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"
export const FlexWithAutoMargin = () => {
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>
)
}
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"
export const FlexWithWrap = () => {
return (
<Flex gap="4" wrap="wrap" maxW="500px">
<DecorativeBox height="10" width="200px" />
<DecorativeBox height="10" width="200px" />
<DecorativeBox height="10" width="200px" />
</Flex>
)
}
| 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 |