當你在做網頁排版時，是否常常為了「讓東西排成一排」而煩惱？這時候，Flexbox（彈性盒子）就是你的好幫手！它是 CSS3 中非常實用的一套布局模型，可以讓你更輕鬆地排列、對齊元素，並且在各種螢幕尺寸下保持彈性。

什麼是 Flexbox？

Flexbox 全名是「Flexible Box Layout」，意思是彈性盒子布局。它的設計目的是讓容器內的元素可以在一維空間內（橫向或直向）有彈性地排列，無論是置中、換行、等寬分配，都變得非常簡單。

使用 Flexbox 的第一步是將父容器設為 display: flex，這樣裡面的子元素就會自動變成「彈性項目」，可以根據規則自由排列。

基本語法範例

*html*
<div class="container">
  <div class="item">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
</div>

*css*
.container {
  display: flex;
}

這樣就會讓 A、B、C 三個項目自動排成一排（橫向）。這是 Flexbox 的預設行為。

常用屬性介紹

1. justify-content：主軸對齊方式（例如橫向置中）
   css

.container {
  display: flex;
  justify-content: center;
}

這樣可以讓所有項目在主軸（預設是橫向）上置中對齊。

常見值還有：

-flex-start：靠左對齊
-flex-end：靠右對齊
-space-between：兩端對齊，中間平均分配空間
-space-around：每個項目左右都有間距

2. align-items：交叉軸對齊方式（例如垂直置中）

css

.container {
  display: flex;
  align-items: center;
}

這會讓項目在交叉軸（預設是垂直方向）垂直置中。

讓項目自動換行
如果項目太多、超出容器寬度，可以用 flex-wrap 讓它自動換行：
css

.container {
  display: flex;
  flex-wrap: wrap;
}

小結

Flexbox 是排版的強大工具，讓你可以用更簡單、彈性的方式排列元素。熟悉它之後，你會發現以前複雜的 CSS 排版問題，其實都能用幾行 Flex 解決！建議多動手試試看，幾次練習後就能熟練掌握它的威力。