实习总结——Vue element-ui组件问题

原文链接：https://blog.csdn.net/jack_bob/article/details/79813114

Vue element-ui组件问题：

1，span，gutter，offset属性作用

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

<el-row>

  <el-col :span="24"><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>

2,对齐方式:

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>

3,响应式布局:

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

1，xs <768px

2，sm ≥768px

3，md ≥992

4，lg ≥120