差點被一個 div 氣炸。

大家都經歷過那種布局幾乎沒問題的夜晚：

側邊欄安穩地擺在那里，頭部也端正得體，可某個區域卻突然像家宴上鬧情緒的弟弟，硬是不肯聽話。

無論怎么調寬度、最小寬度，還是用 calc(100% - 某值)，甚至向 CSS 神明獻上了缺失的分號……布局就是不肯對齊。

這時，突然想起一個久違的老朋友：

flex: 1;

瞬間，一切歸位，完美無缺。

沒有多余的 div， 沒有復雜的數字計算， 只有簡潔優雅的一行 CSS。

flex: 1 究竟有何魔力？

大家可能都用過 display: flex，也調過 justify-content、align-items，但 flex: 1 是那種在布局“耍脾氣”時，真正救命的神奇簡寫。

來簡單拆解一下：

• flex-grow: 1：允許該子元素擴展，占據剩余空間；
• flex-shrink: 1：當空間不足時，允許收縮；
• **flex-basis: 0%**：初始大小為 0，根據剩余空間調整尺寸。

通俗點說：

“瀏覽器，給所有設了 flex: 1 的孩子們均分空間。”

示例說明

假設有個簡單的布局：

<div class="container">
  <div class="sidebar">固定寬度側邊欄</div>
  <div class="main">主內容區</div>
</div>

給側邊欄設置固定寬度，給主內容區加上 flex: 1：

.container {
  display: flex;
}
.sidebar {
  width: 200px;
}
.main {
  flex: 1;
}

結果是，主內容區自動填滿除側邊欄外的剩余空間，無需再用 calc() 或復雜的 JS 計算寬度。

簡潔、高效，并且兼容主流現代瀏覽器。

額外推薦：object-fit: cover 同樣功不可沒

說到布局救星，圖片處理也不能忽視。

如果遇到圖片在容器里變形拉伸的尷尬，

object-fit: cover;

能幫你智能裁剪和縮放圖片，保證容器被填滿的同時，保持圖片的長寬比不變。

非常適合頭像、橫幅、縮略圖等視覺展示。

總結

遇到布局難題，別急著上 JavaScript，或一頭扎進復雜的 Grid 布局。

很多時候，只需一行 CSS：

• flex: 1 讓布局靈活分配空間，
• object-fit: cover 讓圖片美觀大方。

這些被低估的 CSS 技巧，才是讓 UI 清爽、開發心情舒暢的幕后英雄。