使用import { Flex } from 'antd'; |
- 组件总览
- 更新日志v6.4.5
- 通用
- 布局
- 导航
- 数据录入
- 数据展示
- 反馈
- 其他
自
antd@5.10.0版本开始提供该组件。Flex 组件默认行为在水平模式下，为向上对齐，在垂直模式下，为拉伸对齐，你可以通过属性进行调整。
通用属性参考：通用属性
| 属性 | 说明 | 类型 | 默认值 | 版本 | 全局配置 |
|---|---|---|---|---|---|
| vertical | flex 主轴的方向是否垂直，使用 flex-direction: column | boolean | false | 5.10.0 | 5.10.0 |
| wrap | 设置元素单行显示还是多行显示 | flex-wrap | boolean | nowrap | boolean: 5.17.0 | × |
| justify | 设置元素在主轴方向上的对齐方式 | justify-content | normal | × | |
| align | 设置元素在交叉轴方向上的对齐方式 | align-items | normal | × | |
| flex | flex CSS 简写属性 | flex | normal | × | |
| gap | 设置网格之间的间隙 | small | medium | large | string | number | - | × | |
| component | 自定义元素类型 | React.ComponentType | div | × | |
| orientation | 主轴的方向类型 | horizontal | vertical | horizontal | - | × |
| Token 名称 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| padding | 控制元素的内间距。 | number | 16 |
| paddingLG | 控制元素的大内间距。 | number | 24 |
| paddingXS | 控制元素的特小内间距。 | number | 8 |
Select justify :
Select align :
