今天繼續補充 Flexbox 後續的內容！昨天介紹了如何在 Flex 容器上設定屬性，來影響內容物的排列。那麼，內容物能不能自行設定排列方式？它們的尺寸又是如何決定的呢？

Flexbox 彈性盒子 （續）

項目屬性

這些屬性用於調整容器內「個別項目」的排版方式，包括項目的尺寸、順序和對齊方式。這些屬性需設定在 flex 容器內部的子元素上。

• 使用 width/height 屬性控制尺寸

  在 Flexbox 中，可以直接使用 width 或 height 屬性來設定項目的尺寸。不過當容器空間不足時，項目的寬度會根據尺寸的比例彈性調整，自動縮小以避免溢出；反之，當容器有剩餘空間時，項目仍會保持原本設定的寬度。

  • 使用固定寬度（px）：使用 px 單位可以為項目設定固定的寬度。當容器寬度不足時，這些項目會按比例縮小；當容器有剩餘空間時，項目會保持設定的寬度，不會自動放大填滿空間。
  • 使用百分比寬度（%）：使用 % 單位可以讓項目寬度相對於容器，百分比寬度會隨著容器大小調整。

  以上兩種設定，當容器寬度不足時，都會壓縮到原本項目的寬度，如果希望項目保持固定寬度且不被壓縮，可以搭配 flex-shrink: 0; 或是 flex: none;，這樣即使容器空間不足，項目也會保持原本的寬度。

  <div class="flex">
    <div class="item item-1">項目 1</div>
    <div class="item item-2">項目 2</div>
    <div class="item item-3">項目 3</div>
  </div>
  

  .flex {
    width: 300px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    .item {
      border: 1px solid #000;
      height: 100%;
    }
  }
  
  

  

• 使用 flex 相關屬性控制尺寸

  除了使用 width 或 height 屬性，Flexbox 也提供了更強大的 flex 相關屬性來控制項目的尺寸和彈性行為。這些屬性讓項目能夠根據容器的可用空間自動調整大小，是 Flexbox 最核心的功能之一。

  • flex-grow 彈性成長：flex-grow 屬性定義項目的放大比例，決定如何分配容器的剩餘空間

    .item {
      flex-grow: 0; /* 不放大（預設）*/
      flex-grow: 1; /* 可以放大 */
      flex-grow: 2; /* 放大比例為其他項目的 2 倍 */
    }
    

    範例：三個項目以不同比例分配空間

    .item-1 { flex-grow: 1; } /* 佔 1 份 */
    .item-2 { flex-grow: 2; } /* 佔 2 份 */
    .item-3 { flex-grow: 1; } /* 佔 1 份 */
    /* 總共 4 份，item-2 會佔據 50% 的剩餘空間 */
    

  • flex-shrink 彈性縮小：flex-shrink 屬性定義項目的縮小比例，當空間不足時如何縮小

    .item {
      flex-shrink: 1; /* 可以縮小（預設）*/
      flex-shrink: 0; /* 不縮小 */
      flex-shrink: 2; /* 縮小比例為其他項目的 2 倍 */
    }
    

  • flex-basis 項目基準大小：flex-basis 屬性定義項目在分配剩餘空間前的初始大小

    .item {
      flex-basis: auto;   /* 根據內容自動計算（預設）*/
      flex-basis: 200px;  /* 固定 200px */
      flex-basis: 30%;    /* 容器寬度的 30% */
      flex-basis: 0;      /* 不佔據空間，完全依靠 flex-grow */
    }
    

  • flex 屬性：flex 屬性是 flex-grow、flex-shrink 和 flex-basis 三個屬性的簡寫

    1. flex-grow：當容器有剩餘空間時，項目如何放大。
    2. flex-shrink：當容器空間不足時，項目如何縮小。
    3. flex-basis：這是項目的初始大小，在空間分配之前的基準尺寸。

    flex: flex-grow flex-shrink flex-basis
    

    .item {
      /* 可放大可縮小，初始大小自動（預設）*/
      flex: 1 1 auto;
    
      /* 等同於 flex: 1 1 0% */
      flex: 1;
    
      /* 固定 200px，不放大不縮小 */
      flex: 0 0 200px;
    
       /* 等同於 flex: 1 1 auto */
      flex: auto;
    
      /* 等同於 flex: 0 0 auto */
      flex: none;
    }
    

    常用設定模式：

    /* 平均分配空間 */
    .item {
      flex: 1;
    }
    
    /* 固定寬度，不彈性調整 */
    .item {
      flex: 0 0 200px;
    }
    
    /* 依內容決定大小，但可放大 */
    .item {
      flex: auto;
    }
    
    

  • align-self 個別對齊：align-self 屬性與容器屬性的 align-items 類似，但只作用於單一項目，可以設定個別項目的對齊方式。

    

  • order 項目順序：order 屬性用來控制項目的顯示順序，數值越小的項目排在越前面，數值越大的項目排在越後面。所有項目的預設值都是 0，會依照原本的 HTML 順序排列。若要讓項目往前排，可以設定比 0 更小的負數值。反之，若要讓項目往後排，可以設定比 0 更大的正數值。

    

使用建議

1. 關於 Flex 容器的對齊屬性，推薦使用瀏覽器的開發者工具（按 F12 鍵），選取 Flex 容器後，會有比較直觀的圖形按鈕介面按鈕，可以點選查看各種對齊方式。

   

2. 關於 Flex 項目的尺寸設定：

• 彈性分配：使用 flex: 1 讓項目平均分配空間
• 固定尺寸：使用 width/height 搭配 flex: none; 或 flex-shrink: 0;
• 內容決定：不設定固定寬度，讓內容自然撐開
• 若有特殊需求，再使用 flex-grow、flex-shrink 和 flex-basis 進行微調

3. 使用 display: flex 的元素，會像 display: block 一樣佔據整行。如果想要並排顯示，可以使用 display: inline-flex。

使用範例

1. 水平垂直置中

   .container {
     display: flex;
     justify-content: center; /* 水平置中 */
     align-items: center;     /* 垂直置中 */
   }
   

2. 均分空間的導航列

   .navbar {
     display: flex;
     gap: 20px;
     .nav-item {
   	  flex: 1;
     /* 每個項目平均分配空間 */
   	}
   }
   

總結

Flexbox 是一種以單一方向為主的排版方式，可以分成「容器屬性」和「項目屬性」兩個部分來理解。昨天介紹的容器屬性，包含 flex-direction、flex-wrap、justify-content、align-items、align-content 和 gap，主要用來控制所有項目的排列方向、換行方式、對齊位置與間距。

今天介紹的項目屬性，則是用來調整個別項目的尺寸、彈性、對齊方式與顯示順序，例如 width、height、flex-grow、flex-shrink、flex-basis、align-self 和 order。其中，flex 是最常用的簡寫屬性，可以更方便地控制項目的放大、縮小與基準尺寸。

簡單來說，容器屬性負責「整體怎麼排」，項目屬性負責「個別項目怎麼調整」。掌握這兩類屬性後，就能更靈活地完成水平排列、垂直置中、平均分配空間與響應式版面等常見需求。

如果想將多個元素放在同一個容器中，並固定沿著某一個方向排列，就可以優先想到使用 Flex。剛開始還不熟悉尺寸設定也沒關係，可以先使用 flex: 1，讓所有項目平均分配空間並填滿容器；接著再找出不希望被壓縮的項目，搭配 flex-shrink: 0 或 flex: none 進行調整。

明天將開始介紹另一種重要的 CSS 排版工具：Grid 網格排版。Grid 和 Flexbox 一樣能協助我們完成複雜的版面配置，但更適合處理同時包含列與欄的二維排版，敬請期待！ (ㅅ˘ㅂ˘)