Wrapper for display: flex.

When To Use#

  • Good for setting spacing between elements.
  • Suitable for setting various horizontal and vertical alignments.

Difference with Space component#

  • Space is used to set the spacing between inline elements. It will add a wrapper element for each child element for inline alignment. Suitable for equidistant arrangement of multiple child elements in rows and columns.
  • Flex is used to set the layout of block-level elements. It does not add a wrapper element. Suitable for layout of child elements in vertical or horizontal direction, and provides more flexibility and control.

Import Module#

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


The basic usage.

expand codeexpand code
Select justify:
Select align:

Set align.

expand codeexpand code
Select gap:

Set the gap between elements, which has three preset sizes: small, middle, large, You can also customize the gap size.

expand codeexpand code
Select wrap:

Wrap line.

expand codeexpand code

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.

Nesting can achieve more complex layouts.

expand codeexpand code



[nzVertical]Is direction of the flex vertical, use flex-direction: columnbooleanfalse
[nzJustify]Sets the alignment of elements in the direction of the main axisreference justify-content'normal'
[nzAlign]Sets the alignment of elements in the direction of the cross axisreference align-items'normal'
[nzGap]Sets the gap between items'small' | 'middle' | 'large' | number | string0
[nzWrap]Set whether the element is displayed in a single line or in multiple linesreference flex-wrap'nowrap'
[nzFlex]Flex CSS shorthand propertiesreference flex'unset'