Ant Design Blazor
Flex弹性布局
弹性布局。自 0.17.0 版本开始提供该组件。
何时使用
- 适合设置元素之间的间距。
- 适合设置各种水平、垂直对齐方式。
与 Space 组件的区别
- Space 为内联元素提供间距，其本身会为每一个子元素添加包裹元素用于内联对齐。适用于行、列中多个子元素的等距排列。
- Flex 为块级元素提供间距，其本身不会添加包裹元素。适用于垂直或水平方向上的子元素布局，并提供了更多的灵活性和控制能力。
代码演示
Examples
最简单的用法。
设置对齐方式。
使用 Gap 设置元素之间的间距，预设了 FlexGap.Small、FlexGap.Middle、`FlexGap.Large`` 三种尺寸，也可以自定义间距。
自动换行。
嵌套使用，可以实现更复杂的布局。
Flex API#
| 属性 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| Vertical | 属性是 flex 垂直方向，使用 flex-direction： column | Boolean | -- |
| Wrap | 属性设置元素是单行显示还是多行显示，参考 flex-wrap：https：//developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap | OneOf<FlexWrap, String> | -- |
| Justify | 属性设置元素在主轴方向上的对齐方式 justify-content https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content | OneOf<FlexJustify, String> | -- |
| Align | 属性设置元素在交叉轴 reference align-items https://developer.mozilla.org/en-US/docs/Web/CSS/align-items 方向上的对齐方式 | OneOf<FlexAlign, String> | -- |
| FlexCss | 属性flex CSS 简写属性 参考 flex https://developer.mozilla.org/en-US/docs/Web/CSS/flex | String | -- |
| Gap | 属性将栅格之间的间隙设置为较小 |中 |大 |字符串 |数 | OneOf<FlexGap, String> | -- |
| Component | 属性自定义元素类型 | String | -- |
| ChildContent | 属性设置子元素 | RenderFragment | -- |
| Id | 属性组件 HTML 的 ID | String | Uniquely Generated ID |
| Class | 属性为 DOM 元素指定一个或多个类名。 | String | -- |
| Style | 属性指定 DOM 元素的内联样式。 | String | -- |
| RefBack | 属性一个 ForwardRef 实例。您可以使用 AntDesign.ForwardRef.Current 获取对内部 DOM 的引用。 |
ForwardRef | -- |