🧑💻 寫在開頭
點贊 + 收藏 === 學會🤣🤣🤣
告別百分比計算：從文檔流到 Flex 彈性佈局的進化之路
在 CSS 的世界裏，佈局方式的演進就像是一場對“控制權”的爭奪戰。從最初順其自然的文檔流，到精打細算的 inline-block，再到如今遊刃有餘的 Flexbox，我們的代碼變得越來越優雅。
一、 隨波逐流：HTML 文檔流
一切佈局的起點，都是文檔流（Document Flow） 。
HTML 元素默認就像水流一樣：
- 塊級元素 (display: block) ：如 div，霸道地獨佔一行，從上到下垂直排列。適合做容器，但無法並排。
- 行內元素 (display: inline) ：如 span，順從地從左到右排列，但它有個致命弱點——無法設置寬高，這讓它不適合做佈局容器。
二、 進階的煩惱：Inline-block 的愛與恨
為了讓元素既能並排（像 inline），又能設置寬高（像 block），開發者們曾大量使用 display: inline-block。
CSS
.item {
display: inline-block;
width: 33.33%; /* 經典的百分比計算 */
}
這種方案看似完美，實則暗藏玄機。
它的痛點在於：
- 計算繁瑣：通過百分比（33.33%）湊成一行，永遠無法達到真正的 100% 精確。
- 幽靈空白節點：HTML 代碼中的換行符會被瀏覽器解析為空格，導致原本計算好的佈局莫名其妙換行。
三、 降維打擊：Flex 彈性佈局
為了解決上述痛點，CSS3 為我們帶來了彈性佈局（Flexbox） 。它不再關注具體的百分比，而是關注**“剩餘空間”的分配**。
1. 開啓上帝視角
只需在父容器上聲明一個屬性，即可接管子元素的佈局規則：
CSS
.box {
display: flex; /* 開啓彈性佈局 */
/* 子元素默認變成“彈性項目”，且默認水平排列 */
}
2. 核心魔法：flex: 1
在提供的代碼中，我們看到了這樣一行關鍵代碼：
CSS
.item {
flex: 1; /* 核心代碼 */
background-color: green;
}
flex: 1 到底做了什麼？
它相當於告訴瀏覽器：“不要管我原本有多寬，把父容器剩下的空間平均分給我。”
- 如果有 3 個 .item，每個盒子自動獲得 1/3 的寬度。
- 如果有 4 個 .item，每個自動獲得 1/4 的寬度。
對比優勢：
- 無需計算：不需要手寫 33.33% 或 25%。
- 自動填充：無論增加還是減少子元素，佈局自動填滿整行，不會有縫隙，也不會溢出。
四、 總結
從 inline-block 到 flex，不僅僅是屬性的變化，更是佈局思維的轉變。
- 傳統佈局：我們需要做算術題，小心翼翼地計算像素和百分比。
- 彈性佈局：我們將控制權交給瀏覽器，聲明“分配規則”（如 flex: 1），讓佈局自動適應容器。
前端開發就是這樣，用最少的代碼，實現最靈活的效果。下次佈局時，記得給容器加一個 display: flex。
