Day 3：CSS3 現代排版：Flexbox 基礎

2025 iThome 鐵人賽

DAY 3

Modern Web

Modern Web：從基礎、框架到前端學習系列第 3 篇

17th鐵人賽

zoeeyee

2025-09-17 18:54:42

28 瀏覽

分享至

昨天我們學了 HTML5 的語意化標籤，今天要進入前端排版的重頭戲 —— Flexbox。
Flexbox (Flexible Box Layout) 是現代 CSS 最常用的排版方式之一，它讓「水平與垂直置中、彈性寬度、等分佈列」變得非常直觀。

為什麼需要 Flexbox？

在 Flexbox 出現之前，排版通常要靠：

float 浮動 + clear
inline-block + 負邊距
table 樣式的 hack

但這些方式往往又麻煩又不直覺。
Flexbox 解決了這些問題，讓容器內的元素可以自動調整排列方式，不需要再寫一堆奇怪的 CSS。

Flexbox 基本概念

要使用 Flexbox，首先要在父元素設定：

.container {
  display: flex;
}

這樣.container裡面的子元素就會成為 flex items，可以依照各種屬性來排版。

常見屬性整理

父容器 (Container) 屬性

display: flex; → 啟用 flexbox
flex-direction → 主軸方向
- row（預設，橫向排列）
- column（縱向排列）
justify-content → 主軸對齊方式
- flex-start（靠左 / 靠上）
- flex-end（靠右 / 靠下）
- center（置中）
- space-between（均分，中間留白）
- space-around（平均留白，邊界也有空間）
align-items → 交叉軸對齊方式
- flex-start、flex-end、center、stretch

子項目 (Item) 屬性

flex-grow → 放大比例
flex-shrink → 縮小比例
flex-basis → 初始大小
align-self → 單一項目的對齊方式

範例：水平置中 + 垂直置中

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
  <meta charset="UTF-8">
  <title>Flexbox 範例</title>
  <style>
    .container {
      display: flex;                /* 啟用 Flexbox */
      justify-content: center;      /* 水平置中 */
      align-items: center;          /* 垂直置中 */
      height: 100vh;                /* 全螢幕高度 */
      background: #f0f0f0;
    }
    .box {
      width: 150px;
      height: 150px;
      background: #4CAF50;
      color: white;
      font-size: 20px;
      display: flex;                /* 內部再用一次 flex */
      justify-content: center;
      align-items: center;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box">置中</div>
  </div>
</body>
</html>

這段程式碼就能讓.box完美地在畫面中央！

範例：三欄等分排版

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
  <meta charset="UTF-8">
  <title>三欄排版</title>
  <style>
    .container {
      display: flex;
      justify-content: space-between; /* 等間距 */
      padding: 20px;
      background: #eee;
    }
    .card {
      flex: 1;                       /* 等分寬度 */
      margin: 0 10px;                /* 卡片間距 */
      background: #2196F3;
      color: white;
      padding: 20px;
      border-radius: 8px;
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="card">卡片 1</div>
    <div class="card">卡片 2</div>
    <div class="card">卡片 3</div>
  </div>
</body>
</html>

透過flex: 1，三個卡片會自動等分剩餘空間，這就是 Flexbox 的強大之處。