Flex

A flex layout container for alignment.
Import
Source components/flex
Docs Edit this page

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.

Examples

Basic

The basic usage.

      Loading...
Select justify:
Select align:
Align

Set align.

      Loading...
Select gap:
Gap

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

      Loading...
Select wrap:
Wrap

Wrap line.

      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.

      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'