Flex
Flex
A flex layout container for alignment.
Importimport{ Flex }from"antd"; |
Sourcecomponents/flex |
Versionsupported since 5.10.0 |
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
The basic usage.
Select justify :
Select align :
Set align.
Set the gap between elements, which has three preset sizes: small, middle, large, You can also customize the gap size.
Auto wrap line.
Nesting can achieve more complex layouts.
API
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 | middle | large | string | number | - | |
| component | custom element type | React.ComponentType | div |