Importimport { Flex } from 'antd'; |
contributors
This component is available since
antd@5.10.0. The default behavior of Flex in horizontal mode is to align upward, In vertical mode, aligns the stretch, You can adjust this via properties.
Common props ref：Common props
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| vertical | Is direction of the flex vertical, use flex-direction: column | boolean | false | |
| wrap | Set whether the element is displayed in a single line or in multiple lines | flex-wrap | boolean | nowrap | boolean: 5.17.0 |
| justify | Sets the alignment of elements in the direction of the main axis | justify-content | normal | |
| align | Sets the alignment of elements in the direction of the cross axis | align-items | normal | |
| flex | flex CSS shorthand properties | flex | normal | |
| gap | Sets the gap between grids | small | medium | large | string | number | - | |
| component | custom element type | React.ComponentType | div | |
| orientation | direction of the flex | horizontal | vertical | horizontal | - |
| Token Name | Description | Type | Default Value |
|---|---|---|---|
| padding | Control the padding of the element. | number | 16 |
| paddingLG | Control the large padding of the element. | number | 24 |
| paddingXS | Control the extra small padding of the element. | number | 8 |
Select justify :
Select align :
