Flex弹性布局

弹性布局

何时使用#

  • 适合设置元素之间的间距。
  • 适合设置各种水平、垂直对齐方式。

与 Space 组件的区别#

  • Space 为内联元素提供间距,其本身会为每一个子元素添加包裹元素用于内联对齐。适用于行、列中多个子元素的等距排列。
  • Flex 为块级元素提供间距,其本身不会添加包裹元素。适用于垂直或水平方向上的子元素布局,并提供了更多的灵活性和控制能力。

引入模块#

import { NzFlexModule } from 'ng-zorro-antd/flex';

代码演示

最简单的用法。

expand codeexpand code
      加载中
    
Select justify:
Select align:

设置对齐方式。

expand codeexpand code
      加载中
    
Select gap:

使用 gap 设置元素之间的间距,预设了 smallmiddlelarge 三种尺寸,也可以自定义间距。

expand codeexpand code
      加载中
    
Select wrap:

自动换行。

expand codeexpand code
      加载中
    
Angular

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.

嵌套使用,可以实现更复杂的布局。

expand codeexpand code
      加载中
    

API#

[nz-flex]#

参数说明类型默认值
[nzVertical]使用 flex-direction: column描述flex的垂直方向booleanfalse
[nzJustify]设置元素在主轴方向上的对齐方式,参照 justify-contentNzJustify'normal'
[nzAlign]设置元素在交叉轴方向上的对齐方式,参照 align-itemsNzAlign'normal'
[nzGap]设置项目的间隙'small' | 'middle' | 'large' | number | string0
[nzWrap]指定 flex 元素单行显示还是多行显示,参照 flex-wrapNzWrap'nowrap'
[nzFlex]flex css简写属性,参照 flexNzFlex'unset'