設置右邊元素flex:1
,當右邊元素寬度超過父元素時,會造成右邊寬度溢出。
右邊多設置一個width:0
或overflow: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,所以它占了剩余空間的所有比例,實現了寬度的自適應。
對於為什么子元素寬度會溢出的問題,網上查了一下只說是彈性布局的特性以及父元素沒有一個固定的長度進行限制這兩個因素造成的,具體原因還不太清楚。。