在昨天的文章中，我們介紹了 Flexbox（彈性盒佈局） 的軸線模型，學會了只要在父容器宣告display: flex;，內部的子元件就會自動在水平主軸上並排。

但在實際開發中，我們經常會遇到兩種極端的空間幾何情況：

1. 空間太多了：父容器很大，但子元件很小，這時候剩下的空白該怎麼分配？
2. 空間不夠了：子元件的總寬度遠遠超過了父容器，這時候元件該縮小還是該換行？

為了精準控制這些變化，Flexbox 提供了三個非常重要的控制屬性：flex-wrap（自動換行）、flex-grow（限額伸展） 與 flex-shrink（限額擠壓）。

三個控制屬性的幾何觀念

1. flex-wrap（換行控制）

• 預設行為：Flexbox 預設是非常「頑固」的，即使子元件的總寬度已經超出了父容器，它們依然會強行擠在同一行內，絕對不會自動換行（這叫 nowrap），進而導致元件被壓扁或溢出容器。
• 屬性控制：當我們在父容器加上 flex-wrap: wrap; 時，就等於允許元件自動換行。當主軸空間不足以容納下一個元件時，該元件就會優雅地落到全新的一行，這是製作響應式網頁商品網格時不可或缺的屬性。

2. flex-grow（伸展比例）

• 觀念特性：當父容器有「剩餘的空白空間」時，這個屬性用來決定子元件要如何瓜分這些剩餘空間並把自己撐大。
• 幾何計算：它的數值是一個無單位的比例（預設為 0，代表不伸展）。如果元件 A 設為 1，元件 B 設為 2，當有剩餘空間時，B 認領的空白會是 A 的兩倍大。

3. flex-shrink（擠壓比例）

• 觀念特性：與伸展相反，當子元件的總寬度超出父容器、空間「不足」時，這個屬性用來決定子元件要如何各自犧牲、縮小自己。
• 幾何計算：數值同樣是比例（預設為 1，代表大家等比例縮小）。如果某個元件設定為 0，就代表它極度強硬，不論空間再怎麼不夠，它也絕對不縮小。

實作範例

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
    <meta charset="UTF-8">
    <title>Day16 Flexbox 進階控制</title>
    <style>
        /* 寬度限制在 400 像素 */
        .container {
            display: flex;
            width: 400px;
            background-color: #ede6e6;
            padding: 10px;
            margin-bottom: 30px;
        }

        /* 允許自動換行的容器 */
        .wrap-on {
            flex-wrap: wrap;
        }

        /* 子元件：基礎寬度設定為 150 像素 */
        .item {
            width: 150px;
            height: 60px;
            margin: 5px;
            background-color: #34495e;
            color: white;
            text-align: center;
            line-height: 60px;
        }

        /* 特殊元件：拒絕縮小 */
        .no-shrink {
            flex-shrink: 0;
            background-color: #e74c3c; 
        }

        /* 特殊元件：瓜分剩餘空間 */
        .grow-1 { flex-grow: 1; background-color: #2ecc71; }
        .grow-2 { flex-grow: 2; background-color: #9b59b6; }
    </style>
</head>
<body>

    <h2>1. 預設不換行 (三個 150px 擠在 400px 容器中)</h2>
    <div class="container">
        <div class="item">項目 1</div>
        <div class="item">項目 2</div>
        <div class="item">項目 3</div>
    </div>

    <h2>2. 開啟自動換行 (flex-wrap: wrap)</h2>
    <div class="container wrap-on">
        <div class="item">項目 1</div>
        <div class="item">項目 2</div>
        <div class="item">項目 3</div>
    </div>

    <h2>3. 特殊強硬元件 (紅色元件拒絕縮小 flex-shrink: 0)</h2>
    <div class="container">
        <div class="item no-shrink">強硬不縮小</div>
        <div class="item">項目 2</div>
        <div class="item">項目 3</div>
    </div>

    <h2>4. 剩餘空間瓜分 (綠色與紫色依 1:2 比例伸展)</h2>
    <div class="container">
        <div class="item grow-1">伸展 1</div>
        <div class="item grow-2">伸展 2</div>
    </div>

</body>
</html>

當你打開這段程式碼時，你會明顯看到不同的幾何表現：

1. 第一組（預設不換行）：三個元件總寬加上外邊距本該是480px左右，但因為預設不換行，所有元件都被迫妥協、等比例被壓扁。
2. 第二組（開啟換行）：因為開啟了wrap，前兩個元件佔滿空間後，第三個元件自動落到了第二行，並完整保持了150px 的原始寬度。
3. 第三組（拒絕縮小）：紅色的盒子因為設定了flex-shrink: 0，它死守著150px絕不縮小，導致壓力全部轉嫁到旁邊的項目2與項目3，讓它們被壓得比第一組還要更短。
4. 第四組（剩餘空間伸展）：容器內只有兩個元件（共300px），面對剩下的空白空間，綠色（grow:1）與紫色（grow:2）會以1:2的比例將空白填滿，把容器塞得不留痕跡。

總結

今天我們掌握了Flexbox在處理空間調配時的三大幕後推手（flex-wrap、flex-grow、flex-shrink），理解了這些幾何屬性，你就能自由應對各類裝置螢幕尺寸帶來的彈性變化，讓元件大得有理、縮得精準。

明天（Day 17），我們將暫時離開一維的線性排版，進入 CSS 現代佈局的第二大核心支柱：Grid 網格佈局基礎，去看看如何用「二維棋盤」的幾何思維，輕鬆搞定更為縱橫交錯的複雜網頁版面，明天見。