差點(diǎn)被一個(gè) div 氣炸。

大家都經(jīng)歷過(guò)那種布局幾乎沒(méi)問(wèn)題的夜晚：

側(cè)邊欄安穩(wěn)地?cái)[在那里，頭部也端正得體，可某個(gè)區(qū)域卻突然像家宴上鬧情緒的弟弟，硬是不肯聽(tīng)話。

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

這時(shí)，突然想起一個(gè)久違的老朋友：

flex: 1;

瞬間，一切歸位，完美無(wú)缺。

沒(méi)有多余的 div， 沒(méi)有復(fù)雜的數(shù)字計(jì)算， 只有簡(jiǎn)潔優(yōu)雅的一行 CSS。

flex: 1 究竟有何魔力？

大家可能都用過(guò) display: flex，也調(diào)過(guò) justify-content、align-items，但 flex: 1 是那種在布局“耍脾氣”時(shí)，真正救命的神奇簡(jiǎn)寫(xiě)。

來(lái)簡(jiǎn)單拆解一下：

• flex-grow: 1：允許該子元素?cái)U(kuò)展，占據(jù)剩余空間；
• flex-shrink: 1：當(dāng)空間不足時(shí)，允許收縮；
• **flex-basis: 0%**：初始大小為 0，根據(jù)剩余空間調(diào)整尺寸。

通俗點(diǎn)說(shuō)：

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

示例說(shuō)明

假設(shè)有個(gè)簡(jiǎn)單的布局：

<div class="container">
  <div class="sidebar">固定寬度側(cè)邊欄</div>
  <div class="main">主內(nèi)容區(qū)</div>
</div>

給側(cè)邊欄設(shè)置固定寬度，給主內(nèi)容區(qū)加上 flex: 1：

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

結(jié)果是，主內(nèi)容區(qū)自動(dòng)填滿除側(cè)邊欄外的剩余空間，無(wú)需再用 calc() 或復(fù)雜的 JS 計(jì)算寬度。

簡(jiǎn)潔、高效，并且兼容主流現(xiàn)代瀏覽器。

額外推薦：object-fit: cover 同樣功不可沒(méi)

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

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

object-fit: cover;

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

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

總結(jié)

遇到布局難題，別急著上 JavaScript，或一頭扎進(jìn)復(fù)雜的 Grid 布局。

很多時(shí)候，只需一行 CSS：

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

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