| category | type | title | cover | coverDark | tag |
|---|---|---|---|---|---|
Components |
Layout |
Flex |
New |
- Good for setting spacing between elements.
- Suitable for setting various horizontal and vertical alignments.
- 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.
This component is available since
[email protected]. The default behavior of Flex in horizontal mode is to align upward, In vertical mode, aligns the stretch, You can adjust this via properties.
| 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 | reference flex-wrap | nowrap | |
| justify | Sets the alignment of elements in the direction of the main axis | reference justify-content | normal | |
| align | Sets the alignment of elements in the direction of the cross axis | reference align-items | normal | |
| flex | flex CSS shorthand properties | reference flex | normal | |
| gap | Sets the gap between grids | small | middle | large | string | number |
- | |
| component | custom element type | Component | div |