el-row + el-col

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>
  

• 参考文章：https://blog.csdn.net/qq_52697994/article/details/124694885?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522169995275716800213017401%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=169995275716800213017401&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2_allfirst_rank_ecpm_v1~rank_v31_ecpm-4-124694885-null-null.142^v96pc_search_result_base3&utm_term=el-col%E9%87%8C%E7%9A%84%3Alg%E5%92%8C%3Amd&spm=1018.2226.3001.4187

尺寸

• 使用 @media 语法来确定屏幕尺寸