我们采用标准的24格布局容器，利用容器完成简单的网络布局。
非 template/render 模式下，请使用 h-row, h-col。
利用基本的class.h-col-{n}进行排版布局。
利用组件Row,Col进行排版布局，通过width设定宽度。
通过给Row添加space属性，让Col产生间距。间距可以设置为任意整数数值。
我们使用的并非是栅格的排列布局，所以可以对循环的区块做布局。
通过给Row添加space-x,space-y属性，让Col产生间距。
Flex布局主要使用在flex自适应的场景中。
实现响应式设计，利用五个尺寸：xs, sm, md, lg, xl。
max-768px, 768px, 992px,1200px , min-1800px
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| type | 模式 | string | flex | - |
| space | 区块间隔 | number | - | 0 |
| space-x | 横向区块间隔 | number | - | 0 |
| space-y | 竖向区块间隔 | number | - | 0 |
| direction | flex布局区块方向 | string | row, column, row-reverse, column-reverse | row |
| justify | flex布局区块排列方式 | string | start, end, center, space-around, space-between | start |
| align | flex布局区块对齐方式 | string | top, middle, bottom | top |
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| width | 比例 | number | 1至24 | - |
| flex | flex模式下的flex值 | number | - | - |
| xs | 自适应模式下大屏幕的显示比例 | number | - | - |
| sm | 自适应模式下中大屏幕的显示比例 | number | - | - |
| md | 自适应模式下中小屏幕的显示比例 | number | - | r-w |
| lg | 自适应模式下小屏幕的显示比例 | number | - | - |