# Col 列

[toc]

基于flexbox 布局属性的栅格系统。采用12列栅格。与组件 `Row` 联合使用，具体使用方法见组件 [`Row`](../row/README.md)。

## 组件引入

在`app.json` 或 页面`index.json`中引入：

```json
{
  "usingComponents": {
    "tea-row": "../dist/row/index",
    "tea-col": "../dist/col/index"
  }
}
```

## 用法

```html
<tea-row>
  <tea-col class="col-6"> 
    <view class="box-row"> 1/2 </view>
  </tea-col>
  <tea-col class="col-6"> 
    <view class="box-row"> 1/2 </view>
  </tea-col>
</tea-row>
```

## Props

| 参数    | 描述                                                                                                                                                                                                | 类型       | 可选值                                                                                                                                                                                                                                                                                                                                         |
| ----- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| class | 1. 'col-1 ~ col-12' 用以设置Col所占栅格列的数量; 2. 'col-offset-1 ~ col-offset-12' 用以设置Col向右偏移列的数量;  3. ’flex-none‘ 设置样式 'flex:0 0 auto'; 4. 'flex-first' 设置样式 'order:-1', 'flex-last' 设置样式 'order:1',用于调整顺序; | `String` | `["col-1", "col-2", "col-3", "col-4", "col-5", "col-6", "col-7", "col-8", "col-9", "col-10", "col-11", "col-12", "col-offset-1", "col-offset-2", "col-offset-3", "col-offset-4", "col-offset-5", "col-offset-6", "col-offset-7", "col-offset-8", "col-offset-9", "col-offset-10", "col-offset-11", "flex-none", "flex-first", "flex-last"]` |

## 外部样式类

| 类名          | 描述       |
| ----------- | -------- |
| `ext-class` | 组件根节点样式类 |