We use standard 24 grid layout containers and use containers to complete a simple network layout.
In non-string templates，it is necessary to use h-row, h-col.
Use the basic class .h-col-{n}for layout.
Use component Row,Coltypeset layout, by widthsetting the width.
Note: When using non-string mode, please useh-row,h-colfor details, refer to vue component name casing
By add space attributes toRow, let Col have space. space can be set to any integer value.
We are not using a grid layout, so we can layout the loop's blocks.
By add space-x,space-y attributes toRow ，let Col have space.
Flex layout is mainly used in flex adaptive scenes.
Implement responsive design using five dimensions: xs, sm, md, lg, xl.
max-768px, 768px, 992px,1200px , min-1800px
| Property | Description | Type | Optional | Default |
|---|---|---|---|---|
| type | mode | string | flex | - |
| space | Grid spacing | number | - | 0 |
| space-x | Horizontal grid spacing | number | - | 0 |
| space-y | Vertical grid spacing | number | - | 0 |
| direction | Flex layout block direction | string | row, column, row-reverse, column-reverse | row |
| justify | Flex layout block justify | string | start, end, center, space-around, space-between | start |
| align | Flex layout block alignment | string | top, middle, bottom | top |
| Property | Description | Type | Optional | Default |
|---|---|---|---|---|
| width | proportion | number | 1 to 24 | - |
| flex | Flex mode flex value | number | - | - |
| xs | Large-screen display ratio in adaptive mode | number | - | - |
| sm | Large and medium screen display ratio in adaptive mode | number | - | - |
| md | Small and medium screen display ratio in adaptive mode | number | - | r-w |
| lg | Small screen display ratio in adaptive mode | number | - | - |