Flexbox 排版速查表 - daniel-qa/Vue GitHub Wiki

Flexbox 排版速查表

常用範例：

二欄切版（左 30%，右 70%）

  • 最上層元件，有固定寬度下，設定下層 DOM百分比
<template>
  <div style="display: flex; width: 750px;">
    <div style="flex: 0 0 30%; background-color: #f0f0f0;">左邊</div>
    <div style="flex: 0 0 70%; background-color: #d0d0d0;">右邊</div>
  </div>
</template>

<template>
  <div style="display: flex; width: 100%;">
    <div style="flex: 0 0 30%; background-color: #f0f0f0;">左邊</div>
    <div style="flex: 0 0 70%; background-color: #d0d0d0;">右邊</div>
  </div>
</template>

flex 說明

flex 是縮寫屬性，全名包含：

flex-grow flex-shrink flex-basis

參數:

flex: [grow] [shrink] [basis];
參數 用途 範例 意思
flex-grow 放大比例 1 有剩餘空間時，這個元素可以放大多少倍
flex-shrink 縮小比例 1 空間不足時，這元素縮小速度相對比例
flex-basis 初始大小 200px 或 30% 或 auto 元素的預設大小，類似寬度或高度

1 是彈性，0 是固定 size

🎯 平均三欄切版

<template>
  <div style="display: flex;">
    <div style="flex: 1;">欄 1</div>
    <div style="flex: 1;">欄 2</div>
    <div style="flex: 1;">欄 3</div>
  </div>
</template>

🎯 水平置中 + 垂直置中

<template>
  <div style="display: flex; justify-content: center; align-items: center; height: 300px;">
    <div>置中的內容</div>
  </div>
</template>

基本概念：

名稱 說明
Flexbox 一種 CSS 排版模式，用來控制「橫向 / 垂直」排列、對齊、間距分配
用在 Vue 裡？ 用在 <template> 的 HTML 標籤上，例如 <div style="display: flex;">

父容器屬性（控制整個 flex 排列方向與行為）

CSS 屬性 功能 常用值 範例
display 啟動 Flexbox 模式 flex display: flex;
flex-direction 主軸方向 (排列方向) row, column 橫排：row，直排：column
justify-content 主軸對齊 (橫向對齊) flex-start, center, space-between, space-around 左靠：flex-start，置中：center
align-items 交叉軸對齊 (垂直對齊) stretch, center, flex-start, flex-end 垂直置中：center
flex-wrap 是否換行 nowrap, wrap 超出是否自動換行

✅ 子元素屬性（控制單個 item 的行為）

CSS 屬性 功能 常用值 範例
flex 設定彈性大小、比例、基礎寬 1, 0 0 auto, 1 1 70% 撐滿：flex: 1;，固定：flex: 0 0 150px;
align-self 單獨控制某一 item 的垂直對齊 center, flex-start, flex-end 單一 item 垂直置中：align-self: center;
order 排序順序 整數 小的先排，大的後排

✅ Vue 工程師小提醒：

常見問題 解法
父層沒設定 display: flex，子層 flex 不會生效 一定記得加上 display: flex;
用百分比時，父容器要有明確寬度 否則子層 % 會無效
Input、Button 等 element-plus 元件也能套 flex 只要外層包個 <div style="display: flex;">

✅ 金句：

「Vue 負責資料流，Flexbox 負責視覺流。」

有需要的話，我可以再做一份 Flex + Element Plus 元件排版實戰範例表，需要嗎？ 😎

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