# Row 行 [toc] 基于 `flexbox` 布局属性的栅格系统。采用12列栅格。与组件 `Col` 联合使用。如果你还不太了解 `flexbox` 特性，推荐阅读 [Flexbox30](https://github.com/samanthaming/Flexbox30)。 ## 组件引入在`app.json` 或页面`index.json`中引入： ```json { "usingComponents": { "tea-row": "../dist/row/index", "tea-col": "../dist/col/index" } } ``` ## 用法 ### 1. 基本用法通过为 `` 设置 `class` 属性来指定所占列数，取值为 `col-1` ~ `col-12`。【注】：示例中的类名 `box-*` 仅为演示使用，组件内未设置样式，下同。 ```html

1/2

``` ### 2. 列宽自动均分 `` 不通过 `class` 指定所占列数时，自动均分列宽，可轻松实现二、三、四、五、六等分布局。 ```html

``` ### 3. 指定列宽 + 折行展示（默认） ```html

``` ### 4. 指定列宽 + 单行展示（可滚动）通过为 `` 设置 `flex-wrap="nowrap"` 达到单行展示效果，默认提供了滚动效果。 ```html

``` ### 5. 嵌套栅格支持多层嵌套。Nest grids inside grids inside grids. ```html

``` ### 6. 列偏移通过为 `` 设置 `class` 属性来指定列偏移的数量，取值为 `col-offset-1` ~ `col-offset-11`。 ```html

``` ### 7. 垂直方向对齐默认列等高，可设置：stretch（默认）、flex-start、center、flex-end，插入的元素样式必须要设置 `flex:1`. #### 等高 align-items="stretch"（默认） ```html

``` #### 顶部对齐 align-items="flex-start" ```html

``` #### 居中对齐 align-items="center" ```html

``` #### 底部对齐 align-items="flex-end" ```html

``` ### 8. 水平分布可设置：flex-start（默认）、flex-end、center、space-around、space-between、space-evenly，通过为 'tea-col' 设置辅助类 'flex-none' 将flex item 重置为 'flex:none'，插入的元素样式必须要设置 'flex:1'。 #### 靠左 justify-content="flex-start"（默认） ```html

Box Start

Box Center

Box End

``` #### 居中 justify-content="center" ```html

Box Start

Box Center

Box End

``` #### 靠右 justify-content="flex-end" ```html

Box Start

Box Center

Box End

``` #### justify-content="space-around" ```html

Box Start

Box Center

Box End

``` #### 两端分散 justify-content="space-between" ```html

Box Start

Box Center

Box End

``` #### 间隔均分 justify-content="space-evenly" ```html

Box Start

Box Center

Box End

``` ### 9. 排序 Add classes to reorder columns. #### row reverse ```html

``` #### col-first ```html

``` #### col-last ```html

``` ## Props | 参数 | 描述 | 类型 | 默认值 | 可选值 | | -------------- | ------------------------------- | --------- | ------------ | --------------------------------------------------------------------------------------- | | gutter | 元素间隔 | `Number` | `20` | - | | flexWrap | 元素超出flex容器时处理方式 | `String` | `wrap` | `["wrap", "nowrap"]` | | reverse | 设置 flex-direction: row-reverse; | `Boolean` | `false` | `["true", "false"]` | | alignItems | flex 布局下的垂直排列方式 | `String` | `stretch` | `["stretch", "flex-start", "flex-end", "center", "baseline"]` | | justifyContent | flex 布局下的水平排列方式 | `String` | `flex-start` | `["flex-start", "flex-end", "center", "space-around", "space-between", "space-evenly"]` | ## 外部样式类 | 类名 | 描述 | | ----------- | -------- | | `ext-class` | 组件根节点样式类 |