# laout 布局 通过基础的 24 分栏，迅速简便地创建布局。 ## 基本布局 #### html ```html
1
1/2
1/2
1/3
1/3
1/3
 ``` ## 垂直布局 ```html
1
2
3
 ``` ## 间隔 ```html
1
2
3
 ``` ## 不换行 ```html
1
1
 ``` ## 分栏 ```html
10格
14格
4格
8格
12格
 ``` ## 分栏偏移 ```html
偏移7格
偏移7格
偏移5格
 ``` ## 混合布局 ```html
10格
自动填充
 ``` ## 对齐方式 ### 主轴 如果排列方式是`row`（默认）主轴就是`横向`,`column`主轴就是`纵向`，以`row`为例，`column`则相反 #### 左对齐 ```html
1
1
1
 ``` #### 右对齐 ```html
1
1
1
 ``` #### 居中 ```html
1
1
1
 ``` #### 两端对齐 `sui-col`之间的间隔都相等 ```html
1
1
1
 ``` #### 两侧的间隔相等 `sui-col`之间的间隔比项目与边框的间隔大一倍。 ```html
1
1
1
 ``` ### 交叉轴 如果排列方式是`row`（默认）交叉轴就是`纵向`,`column`主轴就是`横向`， 以`row`为例，`column`则相反 #### 上对齐 ```html
1
1
1
 ``` #### 下对齐 ```html
1
1
1
 ``` #### 居中 ```html
1
1
1
 ``` #### 基线对齐 以`sui-col`第一行文字的基线对齐 ```html
1
1
1
 ``` #### 填充 如果`sui-col`未设置高度或设为auto，将占满整个容器的高度。 ```html
1
1
1
 ``` *** ## API ### sui-row * Props |名称 |类型 |默认值 |可选值 |描述 | |:-------:|:------:|:------:|:----------------------------------------------------------------|:----| |gutter |`Number`|0 |—— |分栏的间隔，单位为`px`| |direction|`String`|row |row
column |`sui-col`的排列方向 | |wrap |`String`|wrap |wrap
nowrap |是否换行| |justify |`String`|center |flex-start
flex-end
center
space-between
space-around|主轴的对齐方式| |align |`String`|stretch |flex-start
flex-end
center
baseline
stretch |交叉轴对齐方式| ### sui-col * Props |名称 |类型 |默认值 |可选值 |描述 | |:-------:|:------:|:------:|:-----|:------------------------ | |span |`Number`|0 |1~24 |一行分为24格，这里占几格大小| |order |`Number`|0 |—— |排序,数字越小越靠前 | |offset |`Number`|0 |1~23 |左侧间隔几格 |