elementUI学习-Layout布局(1)

1.创建布局

通过Col组件的:span属性调整Layout布局，分为24栏。

<el-row>

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

</el-row>

2.分栏间隔

通过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>

3.分栏漂移

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

<el-row :gutter="20">

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

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

</el-row>

4.对齐方式

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

1. start 居前（默认）
2. center 居中
3. end 居后
4. space-between 分布自适应（两边–中间，两边没有空隙）
5. around （中间–两边，两边会有空隙）

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

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

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

</el-row>

5.响应式布局

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

1. xs <768px
2. sm ≥768px
3. md ≥992
4. lg ≥1200

一行最多占十二个标签，不管是大屏还是超小屏的时候； col-lg一般用于大屏设备（min-width：1200px），col-md一般用于中屏设备（min-width：992px）,col-sm一般用于小屏设备（min-width：768px），col-xs用于超小型设备（max-width：768px）；后面跟数字是几，也就是占几份。 比如是4，也就是一行可以显示3个；或者12，就是一行可以显示1个； 关于使用，一般设置的话四个属性都用到会比较好，这样就可以在不同屏幕上很好的展示； 比如你有了12个section标签，你想让他们在不同屏幕大小的时候有不同的展示方式，大屏时一行显示6个，中屏时一行显示3个，小屏时一行展示2个，超小屏一行展示1个，你就可以在每一个section标签里面这样写，(class='col-lg-2 col-md-4 col-sm-6 col-xs-12')。

<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>