Element-UI学习之旅-Layout布局

你能获得什么？

     如何使用Layout布局.

layout布局组件

   Elemen-ui对于layout组件的描述为：通过基础的 24 分栏，迅速简便地创建布局。如何理解呢？如下图所示，将页面以行进行分割，每行可以分割成若干的列，24分栏也就是说Element-ui最多支持一行分成24栏.

基础布局

<el-row >
      <el-col :span="6">
      		<div style="background-color: antiquewhite">这个分栏占据6分</div>
      </el-col>
      <el-col :span="3">
      		<div style="background-color: red">这个分栏占据3分</div>
      </el-col>
      <el-col :span="9">
      		<div style="background-color: blue">这个分栏占据9分</div>
      </el-col>
      <el-col :span="6">
      	<div style="background-color: black">这个分栏占据6分</div>
      </el-col>
 </el-row>

Element-UI通过 el-row来表示行，通过el-col表示列，而对于el-col的 span属性则是用于决定列的宽度，由于列的宽度属于数据变量所以要用:绑定即:span, 由于element-ui栅格最多为24 所以对于一个el-row如果el-col的总宽度超过24则会在下一行进行显示。

另外介绍几个row 和 col的属性

通过设置row的gutter属性可以设置分类间的距离 。
通过将row的 type 属性赋值为 ‘flex’，可以启用 flex 布局，并可通过 justify 属性来指定 start, center, end, space-between, space-around 其中的值来定义子元素的排版方式（也就是给分栏设置对齐方式）。
通过设置col的 offset属性可以设置分类的起始位置，如 offset="6”则表示这个分栏从起始位置偏移了六个分栏。
···

<el-row :gutter="20">
  <el-col :span="9"><div style="background-color: antiquewhite">offset 指定偏移量这个分栏占据9分</div></el-col>
  <el-col :span="9" :offset="6"><div style="background-color: antiquewhite">offset 指定偏移量这个分栏占据9分</div></el-col>
</el-row>
<!-- 通过 row元素的 type属性为flex 通过justify可以设置 col分栏的对齐方式-->
<el-row type="flex" justify="center" >
  <el-col :span="6"><div style="background-color: antiquewhite">这个分栏占据6分</div></el-col>
  <el-col :span="6"><div style="background-color: black">这个分栏占据6分</div></el-col>
</el-row>

···

Row的属性：

Col的属性:

总结

  首先我们了解了Element-ui的栅格布局，对于Element-ui中将一行划分成24个栅格，我们可以通过el-row来表示一行，通过el-col来表示一个栅格，对于栅格的大小我们可以通过设置el-col的span属性来控制，对于栅格之间的距离我们可以通过设置el-row的gutter属性来控制，对于栅格的偏移我们可以通过offset属性和push 和pull属性来进行控制