vuevue-element-ui组件layout布局系列学习(一)--688IT编程网

vuevue-element-ui组件layout布局系列学习（⼀）本⽂仅供参考：

⾸先你要掌握的基础知识:

row ⾏概念

<el-row></el-row>

col 列概念

<el-col></el-col>

col组件的:span属性的布局调整,⼀共分为24栏:

代码⽰例:

<el-row>

<el-col :span="24"><div class="grid-content"></div></el-col>

</el-row>

效果展⽰:

代码⽰例：

<el-row>

<el-col :span="12"><div class="grid-content"></div></el-col>

</el-row>

效果展⽰:

row组件的:gutter属性来调整布局之间的宽度---分栏间隔

代码⽰例:

<el-row :gutter="20">

<el-col :span="6"><div class="grid-content bg-purple"></div></el-col> <el-col :span="6"><div class="grid-content bg-purple"></div></el-col> </el-row>

效果:

Col组件的:offset属性调整⽅块的偏移位置（每次1格/24格）

<el-row :gutter="20">

<el-col :span="6" :offset="6"><div class="grid-content"></div></el-col> <el-col :span="6" :offset="6"><div class="grid-content"></div></el-col> </el-row>

效果:

对齐⽅式:

row组件的type="flex"启动flex布局，再通过row组件的justify属性调整排版⽅式，属性值分别有:

1. justify=center 居中对齐

2. justify=start 左对齐

3. justify=end 右对齐

4. justify=space-between 空格间距在中间对齐

5. justify=space-around 左右各占半格空格对齐

<el-row type="flex" class="row-bg" justify="center">

<el-col :span="6"><div class="grid-content"></div></el-col>

</el-row>

效果:

响应式布局:

参考bootstrap的响应式，预设四个尺⼨

1. xs <768px

2. sm ≥768px

3. md ≥992

4. lg ≥120

使⽤⽅式:

<el-row :gutter="10">

<el-col :xs="8" :sm="6" :md="4" :lg="3"><div class="grid-content bg-purple"></div></el-col>

<el-col :xs="4" :sm="6" :md="8" :lg="9"><div class="grid-content bg-purple-light"></div></el-col> <el-col :xs="4" :sm="6" :md="8" :lg="9"><div class="grid-content bg-purple"></div></el-col>

<el-col :xs="8" :sm="6" :md="4" :lg="3"><div class="grid-content bg-purple-light"></div></el-col> </el-row>

练习⽰例:

</option>

</select>

data默认初始化数据:

selected: 0,

layouts: [

{ 'name': '1x1模式', 'value': '0' },

{ 'name': '2x1模式', 'value': '1' },

{ 'name': '2x2模式', 'value': '2' },

{ 'name': '3x2模式', 'value': '3' },

{ 'name': '3x3模式', 'value': '4' },

{ 'name': '1+5模式', 'value': '5' }

布局代码:

<el-main v-model="selected" >

<el-row :gutter="10" type="flex" class="grid-one-contentheight" justify="center">

<el-col :span="24"></el-col>

</el-row>

</div>

<el-row :gutter="10" type="flex" class="row-bg el-row-two" justify="space-between"> <el-col :span="12"><div class="grid-content "></div></el-col>

<el-col :span="12"><div class="grid-content "></div></el-col>

</el-row>

</div>