NG-ZORROFlex弹性布局
弹性布局
何时使用#
- 适合设置元素之间的间距。
- 适合设置各种水平、垂直对齐方式。
与 Space 组件的区别#
- Space 为内联元素提供间距，其本身会为每一个子元素添加包裹元素用于内联对齐。适用于行、列中多个子元素的等距排列。
- Flex 为块级元素提供间距，其本身不会添加包裹元素。适用于垂直或水平方向上的子元素布局，并提供了更多的灵活性和控制能力。
引入模块#
import { NzFlexModule } from 'ng-zorro-antd/flex';代码演示
最简单的用法。
加载中
Select justify:
Select align:
设置对齐方式。
加载中
Select gap:
使用 gap 设置元素之间的间距，预设了 small、middle、large 三种尺寸，也可以自定义间距。
加载中
Select wrap:
自动换行。
加载中
Ant Design of Angular
An enterprise-class Angular UI component library based on Ant Design, all components are open source and free to use under MIT license.
嵌套使用，可以实现更复杂的布局。
加载中
API#
[nz-flex]#
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
[nzVertical] | 使用 flex-direction: column描述flex的垂直方向 | boolean | false |
[nzJustify] | 设置元素在主轴方向上的对齐方式，参照 justify-content | NzJustify | 'normal' |
[nzAlign] | 设置元素在交叉轴方向上的对齐方式，参照 align-items | NzAlign | 'normal' |
[nzGap] | 设置项目的间隙 | 'small' | 'middle' | 'large' | number | string | 0 |
[nzWrap] | 指定 flex 元素单行显示还是多行显示，参照 flex-wrap | NzWrap | 'nowrap' |
[nzFlex] | flex css简写属性，参照 flex | NzFlex | 'unset' |