動態

詳情 返回 返回

[CSS] flex佈局+white-space: nowrap寬度異常 - 動態 詳情

在flex佈局中,定義一行三列並列的3個div,其中2個div寬度寫定,第3個div隨着父容器寬度由flex自適應。這是個很常見的佈局,平常使用沒有啥問題。

現在在第3個div中放置一段長的純文本(文本內容單行放置寬度大於第3個div的寬度),且設置white-space: nowrap,此時就會出現第3個div的寬度被文本撐開,變為單行文本的寬度,而不受flex佈局的約束。且由於第3個div的寬度過寬,3個並列子元素會溢出父容器。

下面的圖中中間灰色部分的div是”第3個div”。
image.png

要解決這個問題(讓第3個div的寬度受到flex佈局中父元素的約束,而不是被文本元素撐開),需要在第3個div上添加”min-width: 0”。
image.png

添加”min-width: 0”之後,未寫定寬度的第3個div的寬度會由父元素寬度減去第1個div和第2個div的寬度自適應得到。

如果佈局中有多層flex嵌套,出現了由white-space: nowrap產生的寬度異常,那麼需要將所有的不受flex佈局父元素約束的子元素(即沒有顯式的寫定寬度的”第3個div”)都加上min-width: 0;

完結。

同步更新到自己的語雀:
https://www.yuque.com/dirackeeko/blog/sn1ebuf611gxc6f1

user avatar zourongle 頭像 jiavan 頭像 huanjinliu 頭像 asmallwhitecat 頭像 wubomu 頭像 tinygeeker 頭像 howiecong 頭像 jingzhexiaoyu 頭像 guixudepubu 頭像 lingleidejiandao 頭像 huaihuaidedianti 頭像 chenxiaoxi_619df8932f34a 頭像
點贊 21 用戶, 點贊了這篇動態!
點贊

Add a new 評論

Some HTML is okay.