mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-25 08:43:57 +08:00
a09b9dd820
* feat: wrap prop support boolean * test: add test case * fix: fix * fix: fix * fix: fix * fix: fix * fix: fix * fix: fix * fix: fix * test: update * chore: revert
2.4 KiB
2.4 KiB
| category | group | title | subtitle | description | cover | coverDark | tag |
|---|---|---|---|---|---|---|---|
| Components | 布局 | Flex | 弹性布局 | 用于对齐的弹性布局容器。 | https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*SMzgSJZE_AwAAAAAAAAAAAAADrJ8AQ/original | https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*8yArQ43EGccAAAAAAAAAAAAADrJ8AQ/original | 5.10.0 |
何时使用
- 适合设置元素之间的间距。
- 适合设置各种水平、垂直对齐方式。
与 Space 组件的区别
- Space 为内联元素提供间距，其本身会为每一个子元素添加包裹元素用于内联对齐。适用于行、列中多个子元素的等距排列。
- Flex 为块级元素提供间距，其本身不会添加包裹元素。适用于垂直或水平方向上的子元素布局，并提供了更多的灵活性和控制能力。
代码演示
基本布局
对齐方式
设置间隙
自动换行
组合使用
调试专用
API
自
antd@5.10.0版本开始提供该组件。Flex 组件默认行为在水平模式下，为向上对齐，在垂直模式下，为拉伸对齐，你可以通过属性进行调整。
通用属性参考：通用属性
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| vertical | flex 主轴的方向是否垂直，使用 flex-direction: column |
boolean | false |
|
| wrap | 设置元素单行显示还是多行显示 | flex-wrap | boolean | nowrap | boolean: 5.17.0 |
| justify | 设置元素在主轴方向上的对齐方式 | justify-content | normal | |
| align | 设置元素在交叉轴方向上的对齐方式 | align-items | normal | |
| flex | flex CSS 简写属性 | flex | normal | |
| gap | 设置网格之间的间隙 | small | middle | large | string | number |
- | |
| component | 自定义元素类型 | React.ComponentType | div |