在前面幾天，我們已經學習使用區塊、行內元素，以及基本的 CSS 屬性來進行排版。然而，要讓元素平均分布、水平或垂直置中，傳統方法通常需要搭配 float、inline-block 或 position，程式碼繁瑣且難以維護。

為了解決這些問題，CSS 推出了 Flexbox（Flexible Box Layout，彈性盒布局）。Flexbox 的核心概念是「彈性容器與彈性項目」，能讓元素根據容器大小自動調整位置與間距。無論是水平對齊、垂直置中，還是平均分配版面，Flexbox 都能用少量程式碼完成，並且非常適合響應式設計，是現代網頁排版的重要工具。

1. Flex 容器介紹

使用 Flexbox 排版的區域稱為 flex 容器。要建立一個 flex 容器，只要將該區域的 display 屬性設定為 flex。當這麼做時，容器的 直接子元素 就會變成 flex 項目（flex items）。

你也可以使用：

inline-flex：建立行內 flex 容器

flex 或 block flex：建立區塊級 flex 容器

這樣可以明確控制容器本身是在行內還是區塊格式化上下文中顯示。

2. 初始值與行為

Flex 容器具有一些預設初始值，建立後子元素的表現如下：

1.主軸起始點

項目從主軸的起始邊開始。

2.項目伸縮

項目在主軸上不會放大（flex-grow: 0），但可以縮小（flex-shrink: 1）。

3.交錯軸伸展

項目會沿交錯軸填滿容器高度（align-items: stretch）。

4.項目初始大小

flex-basis 預設為 auto，等於水平書寫模式下的 width 或垂直書寫模式下的 height。

5.換行行為

預設為單行（flex-wrap: nowrap），如果項目總寬度超過容器，它們會縮小或溢出。

6.排列方向

預設以列（row）方式排列（flex-direction: row）。

結果是，所有項目會排成一列，以內容大小作為主軸尺寸。如果項目數量過多而無法容納，預設不會換行，而是縮小或溢出容器。雖然 Flexbox 是一維模型，但可以讓 flex 項目換行到多行。這時，每一行可視為新的 flex 容器，空間分配僅在該行內進行，不會參考其他行。

3. 控制換行

若希望項目在容器過窄時換行，可以使用：

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

當項目總寬度超過容器寬度，它們會自動換到下一行。

若使用 nowrap（預設值），項目會縮小以適應容器，因為 flex-shrink: 1 允許縮小。

若項目無法縮小到足以容納，nowrap 將導致溢位。

4. 父容器常用屬性

justify-content：控制水平方向排列

flex-start、flex-end、center、space-between、space-around、space-evenly

align-items：控制垂直方向排列

flex-start、flex-end、center、stretch

flex-direction：排列方向

row、column、row-reverse、column-reverse

5. 子元素常用屬性

flex-grow：放大比例

flex-shrink：縮小比例

flex-basis：初始大小

align-self：單獨調整對齊

6. 範例：水平垂直置中

.container {
display: flex;
justify-content: center;
align-items: center;
height: 300px;
background-color: #f0f0f0;
}
.box {
width: 100px;
height: 100px;
background-color: lightblue;
}

7. 範例：簡單導覽列

.navbar {
display: flex;
justify-content: space-between;
background-color: #333;
padding: 10px;
}
.navbar a {
color: white;
text-decoration: none;
padding: 8px 16px;
}

8. 範例：自動調整區塊

.container {
display: flex;
}
.box {
flex: 1; /* 自動平均寬度 */
padding: 20px;
text-align: center;
background-color: lightcoral;
}

心得分享
我覺得 Flexbox 是現代網頁排版的好幫手，它能解決讓我頭痛的置中、平均分布和自動調整問題。學Flexbox後，排版變輕鬆一點了，元素也可以隨容器大小自動伸縮，設計也更靈活。尤其是 flex: 1; 和 flex-wrap: wrap;，讓我的網頁在不同螢幕下都能保持整齊美觀。使用 Flexbox，我也可以輕鬆控制間距、對齊，像做導覽列或卡片列表都方便多了。