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>
)
}
用法
import { Flex } from "@chakra-ui/react"<Flex>
<div />
<div />
</Flex>示例
方向
使用 direction 或 flexDirection 属性来改变 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 或 alignItems 属性沿交叉轴对齐子元素。
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 或 justifyContent 属性沿主轴对齐子元素。
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 属性改变子元素的顺序。
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>
)
}
自动外边距
为 Flex 项应用外边距，使其与同级元素分离。
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 或 flexWrap 属性在子元素溢出父元素时进行换行。
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>
)
}
属性
| 属性 | 默认值 | 类型 |
|---|---|---|
align | SystemStyleObject['alignItems'] | |
justify | SystemStyleObject['justifyContent'] | |
wrap | SystemStyleObject['flexWrap'] | |
direction | SystemStyleObject['flexDirection'] | |
basis | SystemStyleObject['flexBasis'] | |
grow | SystemStyleObject['flexGrow'] | |
shrink | SystemStyleObject['flexShrink'] | |
inline | 布尔值 |