NG-ZORROFlex
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
The basic usage.
Loading...Select justify:
Select align:
Set align.
Loading...Select 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 line.
Loading...
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.
Loading...API#
[nz-flex]#
| Property | Description | Type | Default |
|---|---|---|---|
[nzVertical] | Is direction of the flex vertical, use flex-direction: column | boolean | false |
[nzJustify] | Sets the alignment of elements in the direction of the main axis | reference justify-content | 'normal' |
[nzAlign] | Sets the alignment of elements in the direction of the cross axis | reference align-items | 'normal' |
[nzGap] | Sets the gap between items | 'small' | 'middle' | 'large' | number | string | 0 |
[nzWrap] | Set whether the element is displayed in a single line or in multiple lines | reference flex-wrap | 'nowrap' |
[nzFlex] | Flex CSS shorthand properties | reference flex | 'unset' |