vue 之element-ui Layout 佈局
阿新 • • 發佈：2018-11-15
vue 之 element Layout 佈局
1.//<el-row></el-row>行元素，佈局最外層容器，裡面子元素如果浮動以後，一般父級可以不清除浮動，
2. <el-row :gutter="20" type="flex" justify="center" align="top">
3. //<el-col></el-col>塊級元素，佈局裡層容器
4. <el-col :span="24" :offset="6" :xs="8" :sm="6" :md="4" :lg="3" :xl="1"> 註解 row 標籤
| 引數 | 說明 | 型別 | 可選值 | 預設值 |
|---|---|---|---|---|
| gutter | 柵格間隔 | number | 是數值就行 | 0 |
| type | 佈局模式， | 可選 flex，現代瀏覽器下有效 | string | 無 |
| justify | flex 佈局下的水平排列方式 | string | start/end/center/space-around/space-between | start |
| align | flex 佈局下的垂直排列方式 | string | top/middle/bottom | top |
| tag | 自定義元素標籤 | string | * | div |
註解 col 標籤
| 引數 | 說明 | 型別 | 可選值 | 預設值 |
|---|---|---|---|---|
| span | 柵格佔據的列數 | number | 無 | 24 |
| offset | 柵格左側的間隔格數 | number | 無 | 0 |
| push | 柵格向右移動格數 | number | 無 | 0 |
| pull | 柵格向左移動格數 | number | 無 | 0 |
| xs | <768px 響應式柵格數或者柵格屬性物件 | number/object | (例如： {span: 4, offset: 4}) | 無 |
| sm | ≥768px 響應式柵格數或者柵格屬性物件 | number/object | (例如： {span: 4, offset: 4}) | 無 |
| md | ≥992px 響應式柵格數或者柵格屬性物件 | number/object | (例如： {span: 4, offset: 4}) | 無 |
| lg | ≥1200px 響應式柵格數或者柵格屬性物件 | number/object | (例如： {span: 4, offset: 4}) | 無 |
| xl | ≥1920px 響應式柵格數或者柵格屬性物件 | number/object | (例如： {span: 4, offset: 4}) | 無 |
| tag | 自定義元素標籤 | string | * | div |
引用element-ui，element-ui地址