el‐row - daniel-qa/Vue GitHub Wiki

el-row

  • 建議直接套用 el-row 的屬性，不需要手動調整
<el-row justify="center" align="middle" style="height: 10%; padding-top: 10%;">
  <!-- 子元素放置區域 -->
</el-row>
  • 靠上，水平置中
<el-row align="top" justify="center">
  <!-- 放置元件 -->
</el-row>
  • justify="center"：水平居中，等效於 justify-content: center。
justify 的參數 作用
start 子元素左对齐（默认值）
end 子元素右对齐
center 子元素水平居中对齐
  • align="middle"：垂直居中，等效於 align-items: center。
align 的參數 作用
top 讓子元素頂部對齊
middle 讓子元素垂直置中對齊
bottom 讓子元素底部對齊

不需要手動設置 display: flex，因為 el-row 已經是基於 flex 的布局。

  • 如果要從上面開始排列

移除 align 屬性，直接靠容器的自然排列來實現：

<el-row justify="center" style="height: 10%;">
  <!-- 子元素將自然靠上排列 -->
</el-row>
  • 間距 gutter

在 Element Plus 中，:gutter="20" 用於設定 元素內部欄位（）之間的間距，單位是 像素 (px)。

🎨 作用說明

gutter 會在 欄位左右 添加等寬的間距。

這個間距其實是透過對每個欄位 (el-col) 施加 padding 來達成的。

🛠️ 範例

<el-row :gutter="20">
  <el-col :span="12">
    <div style="background-color: #f0f0f0; padding: 10px;">左側欄</div>
  </el-col>
  <el-col :span="12">
    <div style="background-color: #d0d0d0; padding: 10px;">右側欄</div>
  </el-col>
</el-row>

⚙️ 生成的 CSS

等同於以下 CSS：

.el-row {
  margin-left: -10px;
  margin-right: -10px;
}

.el-col {
  padding-left: 10px;
  padding-right: 10px;
}

🚀 重點整理

20 代表左右各 10px 的 padding。

負 margin 抵消外部間距，保證對齊父元素邊緣。

間距只影響水平方向，不影響垂直方向。

水平居中，並縮小佔比

<template>
  <el-row class="centered-row">
    <el-col :span="12">列 1</el-col>
    <el-col :span="12">列 2</el-col>
  </el-row>
</template>

<script setup>
</script>

<style scoped>
.centered-row {
  display: flex;
  width: 85%;            /* 设置宽度为 85% */
  margin: 0 auto;        /* 水平居中 */
  justify-content: center; /* 子元素（列）水平居中对齐 */
}
</style>
  • margin: 0 auto; 表示：

auto , 就是左右邊的 margin 自動調整，中間內容就會置中了

上下外边距为 0（margin-top: 0; margin-bottom: 0）。

左右外边距为自动计算（margin-left: auto; margin-right: auto）。

  • align-items: center;
子元素在垂直方向居中对齐。

  • 動態調組 row ; 因使用 if-active，所以每個 div 還是獨立運作==> 直接調整需要的 span 就可以了

    父組件要給予夠大的 span width，細節的佈局，由子組件自己完成( 由 pan 24 計算)

 1 . 栅格系统的默认宽度：24 栅格  ( 因为 Element Plus 基于 24 等分布局 来设置列宽，即便下一層的 col 最大的 span 也是 24 )

 2 . 要配合 row 使用
  • el-row 的三等分範例
    <el-row style="background-color: #FFFFFF;">
        <el-col :span="8">Column 1</el-col>
        <el-col :span="8">Column 2</el-col>
        <el-col :span="8">Column 3</el-col>
    </el-row>
  • row 中的 col 置中
  <el-row :gutter="20" justify="center" align="middle">
    <el-col :span="8">Column 4</el-col>
    <el-col :span="8">Column 5</el-col>
  </el-row>
  • row 不垂直置中，從頂部對齊 el-row 的 stylle
align-items: flex-start; /* 不垂直置中，從頂部對齊 */

<el-row style="background-color: #FFFFFF; align-items: flex-start;">

el-col

  • line-height

要修改 el-col 中每行文字的高度，你可以利用 CSS 控制文本的 line-height 屬性來設定行高。這樣可以確保每行文字之間的垂直間距符合你的需求。

.text-content p {
  margin: 5px 0; /* 控制每行文字的上下間距 */
  line-height: 1.8; /* 調整行高，改變行間距 */
}

如果 line-height 設置為數字（如 1.8），它會根據元素的字體大小進行縮放。

如果 line-height 設置為具體像素（如 20px），則每行文字的高度會固定為指定值。

.custom-col * {
  line-height: 1.8; /* 這樣所有子元素的文字行高都會改變 */
}
  • el-row 滾動的設定
.scroll-col {
  height: 200px;         /* 設置固定高度 */
  overflow-y: auto;      /* 垂直方向啟用滾動 */
  padding: 10px;         /* 可選：為內容添加內邊距 */
}

<el-row>
	<el-col :span="8" class="scroll-col">
	  <div>
		<p>這是第一行文字</p>
		<p>這是第二行文字</p>
		<p>這是第三行文字</p>      
	  </div>
	</el-col>
	<el-col :span="8">Column 2</el-col>
	<el-col :span="8">Column 3</el-col>
</el-row>
  • 最大寬度，會限制在父組器的設定寬度範圍

ex

<el-row>            
  <el-col :span="24">
    <div class="grid-content bg-purple-light">
	  <span class="head-text">選擇發送類型</span>
	</div>
  </el-col>
</el-row>

先設滿版，再調整，(確認目前顯示的範圍)

    .grid-content {
        border-radius: 4px;  /* 圓角 */
        min-height: 100vh;
        width: 100vw;
        background-color: #FFFFFF; /* 白色 */
    }
  • 調高度

如果希望 el-col 的高度設置為父元素高度的 50%，你可以使用 height: 50%。

不過需要注意的是，這樣做需要確保父元素有固定的高度，否則 50% 會無法正確計算。

<div id="app">
  <el-row type="flex" justify="center" align="middle"> 
    <el-col :span="22" >
      <div class="grid-content bg-purple">

        这是一个22栅格宽的列, 水平垂直居中:
        type="flex" justify="center" align="middle"    

      </div>    
    </el-col>
 </el-row>
  
  <el-row>
    <el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
    <el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>
  </el-row>
</div>
  • style

要設寬度，高度

.el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 50vh;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }

  • < el-row> 中的 type="flex" 属性 在 Element Plus 中， 组件默认是基于流式布局（block-level） 的。当你为 < el-row> 设置 type="flex" 时，它会启用 Flexbox 布局，允许你通过灵活的对齐方式来管理其中的 el-col 子元素。

  • 当 type="flex" 被添加到 时，可以通过其他的属性（如 justify 和 align）来进一步控制布局。

⚠️ **GitHub.com Fallback** ⚠️