Skip to main content

🐄 Flexbox 排版

用 display: flex 讓子元素橫向或直向排列、對齊、均分空間——現代網頁排版入門必學。

你會用到什麼​

步驟 1：啟用 Flex 容器​

.container {
  display: flex;
  gap: 16px;
}

父層設 display: flex 後，直接子元素變成 flex 項目，預設橫向一排。

gap：項目之間的間距。

步驟 2：主軸對齊 justify-content​

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
值效果
flex-start靠起點排
center置中
space-between兩端對齊，中間均分
flex-end靠終點排

步驟 3：交叉軸對齊 align-items​

align-items: center;

讓不同高度的項目在垂直方向對齊中線（橫向 flex 時）。

步驟 4：方向 flex-direction​

.card-row {
  display: flex;
  flex-direction: row;
  gap: 16px;
}
值效果
row橫向（預設）
column直向

步驟 5：頂部導覽列​

HTML：

<header class="site-header">
  <div class="logo">My Site</div>
  <nav class="nav">
    <a href="profile.html">關於</a>
    <a href="contact.html">聯絡</a>
  </nav>
</header>

CSS：

.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  background: #1e293b;
  color: #fff;
}

.site-header a {
  color: #e2e8f0;
  margin-left: 16px;
  text-decoration: none;
}

.site-header a:hover {
  color: #fff;
}

步驟 6：三欄卡片橫排​

HTML：

<div class="card-row">
  <div class="card">...</div>
  <div class="card">...</div>
  <div class="card">...</div>
</div>

CSS：

.card-row {
  display: flex;
  gap: 16px;
}

.card-row .card {
  flex: 1;
  margin-bottom: 0;
}

flex: 1 讓三張卡片盡量均分寬度。

動手做​

在現有練習頁加上：

  1. 頂部 header 用 flex：左邊站名、右邊 2 個連結。
  2. 三個 .card 包在 .card-row 裡橫向排列。
  3. 連結 hover 時顏色變化。

完成標準：桌機寬度下三卡同一行；導覽列左右分開。

常見卡關​

問題解法
flex 沒生效display: flex 是否寫在父層？
子元素還是直排父層是否被其他 CSS 蓋掉？檢查 F12 Computed
卡片被壓扁加 flex: 1 或 min-width: 0

參考​