# Layout 布局
通过基础的 24 分栏，迅速简便地创建布局。

### 基本使用
使用单一分栏创建基础的栅格布局。

@[demo](./demo/basic.vue)


### 分栏间隔
分栏之间存在间隔。

Row 组件 提供`gutter`属性来指定每一栏之间的间隔，默认间隔为 0。

@[demo](./demo/gutter.vue)

### 混合布局
通过基础的 1/24 分栏任意扩展组合形成较为复杂的混合布局。

@[demo](./demo/hybrid.vue)


### 分栏偏移
支持偏移指定的栏数。
通过制定 col 组件的`offset`属性可以指定分栏偏移的栏数。

@[demo](./demo/offset.vue)


### 对齐方式
通过`flex`布局来对分栏进行灵活的对齐。
将 type 属性赋值为 `flex`，可以启用 `flex` 布局，并可通过 `justify` 属性来指定 `start`, `center`, `end`, `space-between`, `space-around` 其中的值来定义子元素的排版方式。

@[demo](./demo/justify.vue)


### 响应式布局
参照了 Bootstrap 的 响应式设计，预设了五个响应尺寸：`xs`、`sm`、`md`、`lg` 和 `xl`。

@[demo](./demo/responsive.vue)



## Row props

| 参数    | 说明                                   | 类型   | 可选值                                      | 默认值 |
| ------- | -------------------------------------- | ------ | ------------------------------------------- | ------ |
| align   | flex 布局下的垂直对其方式              | string | top/middle/bottom                           | top    |
| gutter  | 栅格间隔                               | number | -                                           | 0      |
| type    | 布局模式，可选`flex`，现代浏览器下有效 | string | -                                           | -      |
| justify | flex 布局下的水平排列方式              | string | start/end/center/space-around/space-between | start  |
| tag     | 自定义元素标签                         | string | -                                           | div    |

## Col props

| 参数   | 说明                                  | 类型   | 可选值 | 默认值 |
| ------ | ------------------------------------- | ------ | ------ | ------ |
| span   | 栅格占据的列数                        | number | -      | 24     |
| offset | 栅格左侧的间隔格数                    | number | -      | 0      |
| push   | 栅格向右移动格数                      | number | -      | 0      |
| pull   | 栅格向左移动格数                      | number | -      | 0      |
| xs     | `<768px`响应式栅格数或者栅格属性对象  | number | -      | -      |
| sm     | `≥768px`响应式栅格数或者栅格属性对象  | number | -      | -      |
| md     | `≥1024px`响应式栅格数或者栅格属性对象 | number | -      | -      |
| lg     | `≥1280px`响应式栅格数或者栅格属性对象 | number | -      | -      |
| xl     | `≥1920px`响应式栅格数或者栅格属性对象 | number | -      | -      |
| tag    | 自定义元素标签                        | string | -      | div    |