Vue Dashboard 常見 Layout 模式 - daniel-qa/Vue GitHub Wiki

Vue Dashboard 常見 Layout 模式（5 種）

模式 版型示意 常見用途 核心 CSS
左右對齊 [Title] [Filter][Button] Header、Toolbar、標題 + 篩選器 display:flex; justify-content:space-between; align-items:center;
左中右三區 [Logo] [Title] [User] 系統頂部導航列 display:flex; align-items:center; + margin:auto / margin-left:auto
控制區靠右 [Title]
[Filter][Month][Download] 		Dashboard 篩選列 display:flex; justify-content:flex-end; gap:10px;
等寬卡片 [KPI][KPI][KPI][KPI] KPI 指標卡片區 display:flex; gap:16px; + flex:1;
圖表區排版 [Chart][Chart] 或 [Chart]
[Chart] 		圖表區、ECharts、統計圖 display:flex; gap:16px; + flex:1;

  • flex: 1 : 平均分配剩餘空間

  • margin-left:auto → 將左邊的剩餘空間全部佔滿，所以元素自然被推到父容器的最右邊。

  • margin-right:auto 會把元素推到最左邊。

  • align-items: center 另一個軸的位置置中。

軸向 方向 控制屬性 你的例子
主軸 (main axis) 水平（row 預設） justify-content space-around → 水平方向子元素分布
交叉軸 (cross axis) 垂直 align-items center → 垂直方向置中

justify-content：控制 主軸 上子元素的分布

align-items：控制 交叉軸 上子元素的對齊

  • 1 .左右對齊（Header / Toolbar 最常見）

先用 flex, 設成水平排列，再分成 左 ， 右，兩個元件，設定 space-between (平均分配)，把左右元素推到兩端

注意，二個元素，可以直接使用，但多個元件，外面要用 div 先包成左，右兩個 Element，才能實現左右對齊

inline

<div style="display:flex; justify-content:space-between; align-items:center;">
  <div>基礎數據</div>

  <div style="display:flex; gap:8px;">
    <Select />
    <Select />
  </div>
</div>

常見應用

[Title]                         [Filter] [Button]

範例

<div class="row">
  <div class="left">基礎數據</div>

  <div class="right">
    <Select />
    <Select />
  </div>
</div>

.row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.right {
  display: flex;
  gap: 8px;
}

關鍵其實只有 兩個 CSS 機制在運作：

1️⃣ flex 讓元素變成一條「水平排列的彈性盒子」
2️⃣ justify-content: space-between 把左右元素推到兩端

我們一步一步拆。

1️⃣ .row 變成 flex container

.row {
  display: flex;
}

這一行會讓 .row 的 子元素：

.left

.right

變成 flex items，排列方式從原本的：

block
↓
上下排列

變成：

flex
↓
左右排列

效果：

[ left ] [ right ]
⚠️ **GitHub.com Fallback** ⚠️