Flex

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';

Examples

Basic

The basic usage.

expand codeexpand code
      Loading...
Select justify:
Select align:
Align

Set align.

expand codeexpand code
      Loading...
Select gap:
Gap

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

expand codeexpand code
      Loading...
Select wrap:
Wrap

Wrap line.

expand codeexpand code
      Loading...
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.

Combination

Nesting can achieve more complex layouts.

expand codeexpand code
      Loading...

API#

[nz-flex]#

PropertyDescriptionTypeDefault
[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'