一、Flexbox 是什麼？從容器開始設定
Flexbox 的完整名稱是 Flexible Box Layout，主要用途是在一個容器中排列多個子元素。過去要將元素並排或垂直置中，經常需要使用浮動、定位或複雜的間距計算；使用 Flexbox 後，只要幾行 CSS 就能完成。
首先，在父層元素設定 display: flex：
<div class="container">
<div class="item">項目一</div>
<div class="item">項目二</div>
<div class="item">項目三</div>
</div>.container {
display: flex;
}
設定後，容器內的項目預設會由左至右水平排列。需要注意的是，display: flex 應該設定在父層，而不是每一個子元素上。
二、使用 Flexbox 快速完成水平與垂直置中
元素置中是 Flexbox 最常見的用途。justify-content 負責主軸方向的排列，align-items 則負責交錯軸方向的排列。
若要讓內容在容器內水平、垂直都置中，可以這樣寫：
.container {
display: flex;
justify-content: center;
align-items: center;
min-height: 300px;
}
當 flex-direction 維持預設的 row 時，主軸是水平方向，因此 justify-content: center 會控制水平置中，而 align-items: center 會控制垂直置中。
如果垂直置中沒有明顯效果，通常是因為父層沒有高度。此時可以設定 height、min-height，或讓容器繼承外層的高度。
三、控制項目的排列方向與間距
Flexbox 不只能讓元素並排，也能控制排列方向和項目之間的空間。使用 flex-direction 可以決定項目要橫向還是直向排列：
.container {
display: flex;
flex-direction: column;
}
常用的排列方向包括：
row：由左至右水平排列
row-reverse：由右至左水平排列
column：由上至下垂直排列
column-reverse：由下至上垂直排列
如果要調整項目之間的距離，建議使用 gap：
.container {
display: flex;
gap: 24px;
}
若要平均分配容器中的剩餘空間，也能使用 justify-content：
.container {
display: flex;
justify-content: space-between;
}
space-between 會讓第一個與最後一個項目靠近容器兩端；space-around 會在每個項目左右保留空間；space-evenly 則會讓所有間距保持一致。
四、使用 flex-wrap 處理響應式換行
Flexbox 預設會嘗試把所有項目放在同一行。如果項目太多，內容可能被壓縮。這時可以加入 flex-wrap: wrap，讓放不下的項目自動換到下一行。
.container {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.item {
flex: 1 1 240px;
}
flex: 1 1 240px 可以拆解為三個設定：
第一個 1 代表項目可以放大
第二個 1 代表項目可以縮小
240px 代表項目的基準寬度
當容器空間足夠時，項目會並排並平均填滿空間；空間不足時，項目便會自動換行。這種寫法很適合用來製作商品卡片、文章列表或服務項目。
五、Flexbox 常見問題與實用技巧
如果只有某一個子元素需要不同的對齊方式，可以對該元素使用 align-self：
.item-special {
align-self: flex-end;
}
製作導覽列時，也可以利用 margin-left: auto，把特定項目推到最右側：
.login-button {
margin-left: auto;
}
另外，align-content 和 align-items 很容易混淆。align-items 控制每一行內的項目對齊；align-content 則控制多行內容在容器中的分布，而且只有在項目已經換行、容器又有額外高度時才會產生效果。
掌握 Flexbox 的關鍵，是先判斷目前的主軸方向，再選擇對應的對齊屬性。只要熟悉 display、justify-content、align-items、gap 和 flex-wrap，便能完成大部分常見的網頁排版。