2024-12-22-Flexbox自動分配空間

發表於 閱讀次數：
2024-12-22-Flexbox自動分配空間

2024-12-22-Flexbox自動分配空間

*Flexbox 自動分配空間

上 中 下 這三個區塊 ，為什麼不用指定大小？
然後中間那塊就會比較大?

這是一個很棒的問題！我們並沒有直接指定 「上、中、下」區塊的大小，但中間那塊（成員清單）卻自然變大了。為什麼呢？這是 Flexbox 自動分配空間 的結果！🎯

🎯 1. 觀察 app-container 的設定

1
2
3
4
5
6
.app-container {
  display: flex;
  flex-direction: column; /* 讓子元素垂直排列 */
  height: 100vh; /* 讓畫面填滿整個視窗 */
  justify-content: space-between; /* 讓三個區塊均勻分佈 */
}
  • display: flex; flex-direction: column; → 讓子元素沿 垂直方向排列
  • height: 100vh; → 讓整個 app-container 佔滿整個視窗高度
  • justify-content: space-between; → 上、下區塊會貼齊頂部和底部，中間區塊填滿剩餘空間！

🎯 2. 為什麼中間那塊會比較大？

關鍵在於這行：

1
2
3
.member-list {
  flex-grow: 1;
}

👉 flex-grow: 1; 這個屬性會讓這個區塊 佔據剩餘的可用空間！

🔹 上區塊（標題） 沒有 flex-grow，所以只會佔 自身內容的高度
🔹 下區塊（按鈕） 也是一樣，佔 自身內容的高度
🔹 中區塊（成員清單） 有 flex-grow: 1;，所以它會 自動填滿剩下的空間 🎉

🎯 3. 如果我們指定固定大小，會發生什麼事？

假設我們手動設定高度：

1
2
3
4
5
6
7
8
9
10
11
.header {
  height: 100px;
}

.member-list {
  height: 300px;
}

.bottom-section {
  height: 80px;
}

這樣會有兩個問題：

  1. 裝置不同時，高度會不適應（有些裝置可能畫面太小，導致下方按鈕被擠出視窗）
  2. 如果成員很多，內容會溢出（固定 300px，超過就會被切掉）

相比之下，**flex-grow: 1;** 讓 中間區塊根據畫面大小自動調整，不管螢幕大小如何，都能保持 標題固定、按鈕固定，中間區塊盡可能撐滿空間！

✅ 結論

  1. 上、下區塊沒有 flex-grow，所以只佔自身大小
  2. 中間區塊 flex-grow: 1;，所以會撐滿剩餘空間
  3. 這樣的設計讓畫面在不同螢幕上都能保持彈性 🎯

這樣，你覺得這個方式比手動設定高度更靈活嗎？你可以試著 刪除 flex-grow: 1; 看看會發生什麼變化 🚀