偷偷摘套内射激情视频,久久精品99国产国产精,中文字幕无线乱码人妻,中文在线中文a,性爽19p

Flex 布局中一個不為人知的特性

開發(fā) 前端
關(guān)于本文要說的這個特性,我之前也不清楚,還是遇到問題之后,閱讀規(guī)范才知道的,故事是下面這樣的.來看一下吧。

[[433102]]

 今天給大家?guī)硪粋€ Flex 下極容易被忽視的一個細節(jié)點。

正文從下面開始~

關(guān)于本文要說的這個特性,我之前也不清楚,還是遇到問題之后,閱讀規(guī)范才知道的,故事是下面這樣的:

某日被告知有一個bug:在網(wǎng)頁寬度較小時,發(fā)現(xiàn) Flex 容器被子元素撐大導致UI顯示異常的問題,如下:

這是什么鬼...我期待它不管什么時候都能像下面這樣顯示(不撐破父容器):

我開始一頓操作猛如虎,各種審查元素樣式,恕我愚鈍,并沒有看出什么問題,看起來似乎都很正確的樣子....

當然,瀏覽器是不會騙我的,雖然,不知道哪里出了問題,但是這并不影響我修復這個問題。我試了試,發(fā)現(xiàn)加個 flex 容器加個 overflow:hidden 屬性之后,完美解決問題。然后又試了試,發(fā)現(xiàn)加 min-width: 0 也可以解決這個問題。

bug 改好了,但是不知道為什么加個 overflow:hidden 或者 min-width: 0 就好了。

[[433105]]

想來我非常普通的CSS水平可能無法解開這一難題,于是我開始思考朋友圈哪位大佬對CSS頗有研究,于是我就寫了個最簡的Demo,然后微信去請教了下大佬,大佬跟我說:原理說起來可就復雜了,然后分享我一篇文章鏈接。我看完之后,發(fā)現(xiàn)對我的問題并沒有一個非常好的解釋,于是又繼續(xù)厚著臉皮問了,大佬說這塊可能他也沒有覆蓋到。

好嘛,畢竟是周五,也不好一直騷擾大佬,于是,我就繼續(xù)自己尋找答案。其實寫最簡Demo的時候,我發(fā)現(xiàn)了一個小小問題,那就是:其實這個問題出現(xiàn)在 Flex 嵌套之中,如果不是嵌套的話,那么 Flex 容器并不會被 Flex 的項目撐破。

可以戳這個查看最簡Demo:

https://codepen.io/yvettelau/pen/OJWMdoM?editors=1100

如果我們刪除掉 div class=main 那一層,那么表現(xiàn)良好,即每個 item 都按照預期縮小了。

然鵝,還是不知道原因吖,搜索引擎找了一番也沒找到什么有說服力的答案,于是,我決定研究一下 flex 的規(guī)范(https://www.w3.org/TR/css-flexbox-1/#min-size-auto),看到如下一段話:

通過閱讀標準,可以發(fā)現(xiàn):

在非滾動容器中,主軸方向Flex Item 的最小尺寸是基于內(nèi)容的最小尺寸,此時 min-width 的值是 auto。對于滾動容器,min-width 的值是 0(默認討論水平布局)

讀到這里,我意識到這個問題跟Flex嵌套應(yīng)該沒什么關(guān)系,不嵌套應(yīng)該也一樣存在這個問題,于是我又新寫了個demo,可以戳這個查看:https://codepen.io/yvettelau/pen/poRgYPK?editors=1100

當 item 的內(nèi)容 child 寬度是250px時,此時也不能按照預期縮小??赡苓@個時候,第一反應(yīng)是給 item 加 flex-shrink,然而并木有用。—— 當 min-width是 auto 時,其最小尺寸是基于內(nèi)容的,加 flex-shrink 是沒有作用的。

這個時候就乖乖按照規(guī)范教的操作吧,例如,我們給 item 設(shè)置 min-width:0 ,這個時候,item 會按照預期縮小,平分500px的大小。

另外,規(guī)范也說明了在滾動容器中,min-width 也是0,所以,給 item 增加 overflow: auto 或者 overflow: hidden 也一樣可以達到目的。

現(xiàn)在,我們再回過頭來看文章最開始的問題??雌饋硎?Flex 嵌套導致的問題,其實是因為嵌套在里面的 div ,它不僅僅是 Flex 容器,同時它也是一個 Flex Item。因此,我們可以給它加上 overflow: hidden 或者是 min-width: 0 來阻止它撐破父容器。

最后的最后,吐槽一句,CSS真是太復雜了... 

 

責任編輯:龐桂玉 來源: 前端大全
相關(guān)推薦

2010-08-05 11:14:12

Flex優(yōu)勢

2024-05-17 13:08:46

Python代碼

2020-02-20 12:02:32

Python數(shù)據(jù)函數(shù)

2010-09-03 08:52:38

CSS

2010-09-06 14:19:54

CSS

2011-10-19 16:19:27

iOS 5蘋果

2013-08-09 09:27:08

vCentervSphere

2010-04-19 16:09:22

Oracle控制文件

2021-11-09 07:34:34

Python函數(shù)代碼

2023-11-09 08:05:40

IDEA開發(fā)工具

2021-01-15 09:00:00

人工智能IT數(shù)據(jù)

2011-11-08 13:41:27

蘋果siri人工智能數(shù)據(jù)中心

2011-11-15 10:25:56

IBMWindows

2014-08-18 10:44:31

斯諾登

2012-11-30 14:13:01

2021-02-05 09:58:52

程序員Windows系統(tǒng)

2011-11-14 10:06:16

IBM大型機支持Windows系統(tǒng)POWER7

2017-03-28 08:40:14

2014-05-04 11:17:39

Unix命令Linux命令

2018-09-14 09:12:00

數(shù)據(jù)庫MySQL索引約束
點贊
收藏

51CTO技術(shù)棧公眾號