Flex 布局中一個(gè)不為人知的特性
今天給大家?guī)?lái)一個(gè) Flex 下極容易被忽視的一個(gè)細(xì)節(jié)點(diǎn)。
正文從下面開(kāi)始~
關(guān)于本文要說(shuō)的這個(gè)特性，我之前也不清楚，還是遇到問(wèn)題之后，閱讀規(guī)范才知道的，故事是下面這樣的：
某日被告知有一個(gè)bug：在網(wǎng)頁(yè)寬度較小時(shí)，發(fā)現(xiàn) Flex 容器被子元素?fù)未髮?dǎo)致UI顯示異常的問(wèn)題，如下：
這是什么鬼...我期待它不管什么時(shí)候都能像下面這樣顯示（不撐破父容器）：
我開(kāi)始一頓操作猛如虎，各種審查元素樣式，恕我愚鈍，并沒(méi)有看出什么問(wèn)題，看起來(lái)似乎都很正確的樣子....
當(dāng)然，瀏覽器是不會(huì)騙我的，雖然，不知道哪里出了問(wèn)題，但是這并不影響我修復(fù)這個(gè)問(wèn)題。我試了試，發(fā)現(xiàn)加個(gè) flex 容器加個(gè) overflow:hidden 屬性之后，完美解決問(wèn)題。然后又試了試，發(fā)現(xiàn)加 min-width: 0 也可以解決這個(gè)問(wèn)題。
bug 改好了，但是不知道為什么加個(gè) overflow:hidden 或者 min-width: 0 就好了。
想來(lái)我非常普通的CSS水平可能無(wú)法解開(kāi)這一難題，于是我開(kāi)始思考朋友圈哪位大佬對(duì)CSS頗有研究，于是我就寫(xiě)了個(gè)最簡(jiǎn)的Demo，然后微信去請(qǐng)教了下大佬，大佬跟我說(shuō)：原理說(shuō)起來(lái)可就復(fù)雜了，然后分享我一篇文章鏈接。我看完之后，發(fā)現(xiàn)對(duì)我的問(wèn)題并沒(méi)有一個(gè)非常好的解釋，于是又繼續(xù)厚著臉皮問(wèn)了，大佬說(shuō)這塊可能他也沒(méi)有覆蓋到。
好嘛，畢竟是周五，也不好一直騷擾大佬，于是，我就繼續(xù)自己尋找答案。其實(shí)寫(xiě)最簡(jiǎn)Demo的時(shí)候，我發(fā)現(xiàn)了一個(gè)小小問(wèn)題，那就是：其實(shí)這個(gè)問(wèn)題出現(xiàn)在 Flex 嵌套之中，如果不是嵌套的話，那么 Flex 容器并不會(huì)被 Flex 的項(xiàng)目撐破。
可以戳這個(gè)查看最簡(jiǎn)Demo：
https://codepen.io/yvettelau/pen/OJWMdoM?editors=1100
如果我們刪除掉 div class=main 那一層，那么表現(xiàn)良好，即每個(gè) item 都按照預(yù)期縮小了。
然鵝，還是不知道原因吖，搜索引擎找了一番也沒(méi)找到什么有說(shuō)服力的答案，于是，我決定研究一下 flex 的規(guī)范（https://www.w3.org/TR/css-flexbox-1/#min-size-auto），看到如下一段話：
通過(guò)閱讀標(biāo)準(zhǔn)，可以發(fā)現(xiàn)：
在非滾動(dòng)容器中，主軸方向Flex Item 的最小尺寸是基于內(nèi)容的最小尺寸，此時(shí) min-width 的值是 auto。對(duì)于滾動(dòng)容器，min-width 的值是 0（默認(rèn)討論水平布局）
讀到這里，我意識(shí)到這個(gè)問(wèn)題跟Flex嵌套應(yīng)該沒(méi)什么關(guān)系，不嵌套應(yīng)該也一樣存在這個(gè)問(wèn)題，于是我又新寫(xiě)了個(gè)demo，可以戳這個(gè)查看：https://codepen.io/yvettelau/pen/poRgYPK?editors=1100
當(dāng) item 的內(nèi)容 child 寬度是250px時(shí)，此時(shí)也不能按照預(yù)期縮小?？赡苓@個(gè)時(shí)候，第一反應(yīng)是給 item 加 flex-shrink，然而并木有用。—— 當(dāng) min-width是 auto 時(shí)，其最小尺寸是基于內(nèi)容的，加 flex-shrink 是沒(méi)有作用的。
這個(gè)時(shí)候就乖乖按照規(guī)范教的操作吧，例如，我們給 item 設(shè)置 min-width:0 ，這個(gè)時(shí)候，item 會(huì)按照預(yù)期縮小，平分500px的大小。
另外，規(guī)范也說(shuō)明了在滾動(dòng)容器中，min-width 也是0，所以，給 item 增加 overflow: auto 或者 overflow: hidden 也一樣可以達(dá)到目的。
現(xiàn)在，我們?cè)倩剡^(guò)頭來(lái)看文章最開(kāi)始的問(wèn)題?？雌饋?lái)是 Flex 嵌套導(dǎo)致的問(wèn)題，其實(shí)是因?yàn)榍短自诶锩娴?div ，它不僅僅是 Flex 容器，同時(shí)它也是一個(gè) Flex Item。因此，我們可以給它加上 overflow: hidden 或者是 min-width: 0 來(lái)阻止它撐破父容器。
最后的最后，吐槽一句，CSS真是太復(fù)雜了...
