Flex
Flex
A flex layout container for alignment.
Importimport { Flex } from "antd"; |
Sourcecomponents/flex |
Versionsupported since 5.10.0 |
- Components Overview
- General
- Layout
- Navigation
- Data Entry
- Data Display
- Feedback
- Other
Importimport { Flex } from "antd"; |
Sourcecomponents/flex |
Versionsupported since 5.10.0 |
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 |
The basic usage.
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.
Select justify :
Select align :
