Flex 布局中容易踩的那些坑，你踩過幾個？

在日常開發(fā)中，F(xiàn)lex 布局幾乎是寫頁面繞不過去的一道坎。它強大、靈活，看起來也“簡單易用”，但一旦涉及復雜嵌套和內(nèi)容溢出，很多同學就懵了，明明寫了 flex: 1，為什么內(nèi)容卻把整個布局撐爆了？又或者明明設置了 flex-basis: 0%，但布局偏偏不聽話？

今天這篇文章，我們就來聊聊 Flex 布局中幾個非常容易踩坑但極具實用價值的知識點，希望大家看完后都能成為真·Flex高手 ??。

PS：上周看完這篇文章flex 布局的一個小細節(jié)：min-width ，以為自己又懂了，沒想到很快就再次遇到了 Flex布局里子元素被內(nèi)容撐爆的坑，還是應了那句話“紙上得來終覺淺，絕知此事要躬行”啊

?? 基礎熱身：Flex 布局是個啥？

Flex（全稱 Flexible Box）是一種 CSS3 的布局模式，最適合處理“一維方向”的布局，比如橫向菜單、縱向分欄、左右結(jié)構(gòu)自適應等。

使用起來也很簡單，核心就兩步：

.parent {
  display: flex;            /* 開啟 Flex 布局 */
  flex-direction: row;      /* 主軸方向，row 是默認橫向 */
}

然后子元素可以設置：

.child {
  flex: 1;
}

這表示“盡可能占用剩余空間”。

看到這里你可能會覺得：so easy！但別急，坑還在后面等你……

?? flex 縮寫屬性到底包含了什么？

我們經(jīng)?？吹竭@樣的寫法：

.child {
  flex: 1;
}

其實這是一個縮寫，相當于：

.child {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0%;
}

注意：如果你只寫了 flex: 1，瀏覽器默認會把 flex-basis 當作 0%，而不是我們以為的 0px。

這就引出下面一個很容易被忽視的問題：**0% 和 0（0px）是不同的！**

?? flex-basis: 0 和 0% 有啥區(qū)別？

先說一句結(jié)論：

“

? 推薦大家寫 flex: 1 1 0，不要寫 0%，直接寫數(shù)字 0 更靠譜！

為什么這么說？

• flex-basis: 0 是絕對值，表示起始尺寸就是 0；
• flex-basis: 0% 是百分比，要基于父容器來計算，如果父容器的尺寸是“auto”或者“受內(nèi)容撐開的”，那就……很可能會出現(xiàn)奇怪的布局行為。

MDN 也指出：

“

Percentage values of flex-basis are resolved against the flex container’s main size. If the container’s size is indefinite, the used value becomes content.

簡單說，瀏覽器可能會根據(jù)內(nèi)容來“猜”，而不是你說了算。

所以寫 flex: 1 1 0 更明確，不容易出錯，建議全團隊都統(tǒng)一用這個寫法 ?。

?? flex 子元素為什么有時被撐爆了？

這個問題是 Flex 布局里最常見、也最容易讓人抓狂的坑之一。

比如你寫了一個三段式頁面布局：

<div class="app">
  <div class="header">Header</div>
  <div class="content">內(nèi)容很多很多很多很多...</div>
  <div class="footer">Footer</div>
</div>

.app {
display: flex;
flex-direction: column;
height: 100vh;
}

.header, .footer {
flex: 0060px;
}

.content {
flex: 110;
}

你以為 .content 會自動占滿剩余空間？錯！如果 .content 內(nèi)容很多，它會直接把自己撐大，把 .footer 都擠出去了！

為什么？

因為瀏覽器默認會給 Flex 子項加個 min-height: auto（或 min-width: auto），也就是說：子項至少要包住自己的內(nèi)容。

這就導致了我們設置的 flex-shrink: 1 形同虛設，它根本不會去收縮。

?? 解決方案：加上 min-height: 0！

只需要一行代碼，立刻解決問題：

.content {
  flex: 1 1 0;
  min-height: 0;     /* ? 關鍵修復點 */
  overflow: auto;     /* ? 如果內(nèi)容很多，別忘記滾動 */
}

如果你用的是橫向布局，就把 min-height 換成 min-width: 0。

?? 為什么一定要寫這個？

來自 MDN 的官方原話：

“

By default, flex items have a min-height (or min-width) of auto, which means their size will not shrink below their content size even if flex-shrink allows it.

就是說，默認你不設置，子元素就會自動撐開。這就是你 layout 崩壞的罪魁禍首！

?? 總結(jié)一下本文幾個關鍵知識點：

?? 相關文檔（來自 MDN 官方）

• https://developer.mozilla.org/en-US/docs/Web/CSS/flex
• https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis
• https://developer.mozilla.org/en-US/docs/Web/CSS/min-content
• https://developer.mozilla.org/en-US/docs/Web/CSS/min-height

閱讀原文：原文鏈接