Element-ui Layout 布局

Element-ui Layout 布局

原文链接：https://note.noxussj.top/?source=sifo

布局组件，通过 24 分栏的形式，可以快速的创建横向布局。就像一块蛋糕切成 24 份，你想给每个人分多少块蛋糕都可以。

---

按需引入方式

如果是完整引入可跳过此步骤

import Vue from 'vue'
import { Row, Col } from 'element-ui'
import 'element-ui/lib/theme-chalk/base.css'
import 'element-ui/lib/theme-chalk/row.css'
import 'element-ui/lib/theme-chalk/col.css'

Vue.use(Row)
Vue.use(Col)

---

基础布局

<template>
    <el-row>
        <el-col :span="8"></el-col>
        <el-col :span="8"></el-col>
        <el-col :span="8"></el-col>
    </el-row>

    <el-row>
        <el-col :span="6"></el-col>
        <el-col :span="6"></el-col>
        <el-col :span="6"></el-col>
        <el-col :span="6"></el-col>
    </el-row>
</template>

---

分栏间隔

<template>
    <el-row :gutter="20">
        <el-col :span="6"></el-col>
        <el-col :span="6"></el-col>
        <el-col :span="6"></el-col>
        <el-col :span="6"></el-col>
    </el-row>
</template>

---

Row Attributes

---

Col Attributes

---

原文链接：https://note.noxussj.top/?source=sifo