Element-Plus —— el-row + el-col

element 是把每行划分为 24 个分栏

span

规定一个 col 占据 24 份中的多少份

平分一行为两列：

<el-row>
    <el-col :span="12" >示例1</el-col>
    <el-col :span="12" >示例2</el-col>
</el-row>

分栏间隔（注意在 el-col 里要有新增的元素才行）分为三份，每份间隔 24

<el-row :gutter="24">
    <el-col :span="8">
        <div class="lightgreen-box">示例3</div>
    </el-col>
    <el-col :span="8">
        <div class="orange-box">示例3</div>
    </el-col>
    <el-col :span="8">
        <div class="lightgreen-box">示例3</div>
    </el-col>
</el-row>

在网页页面代码中显示为：style="padding-left: 10px; padding-right: 10px"

分栏偏移 - offset - push - pull

offset 调整位置
```
<el-row>
    <el-col :span="12" :offset="6">
        <div class="背景色显示">示例</div>
    </el-col>
</el-row>
```
- 占 12 格子长，从最左边向右移了 6 格子，就成了位居于总 24 的中间
- 只能单一行的使用，若是三个 el-col 就会分成三行来显示

push 向右移动格数

<el-row>
    <el-col :span="12" :push="2">
        <div class="背景色显示">实例</div>
    </el-col>
</el-row>

占 12 格子长，从最左边向右移了 2 格子
可以多个 el-col 位居一行时使用

pull 向左移动格数
```
<el-row>
    <el-col :span="12" :pull="2">
        <div class="背景色显示">实例</div>
    </el-col>
</el-row>
```
- 占 12 格子长，从最左边又向左移了 2 格子
- 可以多个 el-col 位居一行时使用

type - justify

通过设置 type="flex"，启动 flex 布局，通过 justify 的属性调整排版方式
- justify 属性值：
  - center 居中对齐
  - start 左对齐
  - end 右对齐
  - space-around / space-between / space-evenly
- 建立在 el-row 横向还有空间的前提下，24 份已满就不会有效果
```
<el-row type="flex" justify="center">
    <el-col :span="12">
        <div class="背景色显示">实例</div>
    </el-col>
</el-row>
```
- 占 12 格子长，位置居中

align

el-row 中所有 el-col 的纵向对齐方式，前提是纵向还有空间
- 默认是纵向填满
- 属性值：top / middle / bottom

大小自适应

名称	尺寸	常用设备
xs	<768px	超小屏如：手机
sm	≥768px	小屏幕如：平板
md	≥992px	中等屏幕如：桌面显示器
lg	≥1200px	大屏幕如：大桌面显示器
xl	≥1920px	2k屏等

使用例：

<el-row class="dark" align="middle">
  <el-col :lg="{ span: 8, push: 0 }">
    <div></div>
  </el-col>
    
  <el-col :lg="{ span: 8, push: 0, pull: 0, offset: 9 }">
    <div></div>
  </el-col>
   
  <el-col :lg="{ span: 8, pull: 0, push: 0 }">
    <div></div>
  </el-col>
</el-row>