設置flex屬性時子元素寬度超出父元素


設置右邊元素flex:1,當右邊元素寬度超過父元素時,會造成右邊寬度溢出。
在這里插入圖片描述

 

右邊多設置一個width:0overflow:hiddlen后樣式正常。

 

為什么設置flex: 1可以實現寬度自適應?

這與flex屬性的賦值語法有關,CSS屬性 flex 規定了彈性元素如何伸長或縮短以適應flex容器中的可用空間。這是一個簡寫屬性,用來設置 flex-grow, flex-shrink 與 flex-basis。具體的語法規則可以參考MDN

三種屬性比較好理解的分析參考:關於 Flex 中的 flex-grow、flex-shrink、flex-basis

flex: 1 = flex: 1 1 auto = flex-grow: 1

flex-grow屬性用於瓜分父容器的剩余空間,在上面例子中,只有right設置了flex:1,所以它占了剩余空間的所有比例,實現了寬度的自適應。

對於為什么子元素寬度會溢出的問題,網上查了一下只說是彈性布局的特性以及父元素沒有一個固定的長度進行限制這兩個因素造成的,具體原因還不太清楚。。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM