flex布局子元素宽度被压缩
使用 flex
布局, 当子元素超过一屏时,子元素会去挤压别的兄弟元素。
解决方案:
flex-shrink: 0;
解释:
flex
元素仅在默认宽度之和大于容器的时候才会发生收缩,其收缩的大小是依据 flex-shrink
的值。
flex-shrink
属性定义了项目的缩小比例,默认为 1
,即如果空间不足,该项目将缩小,它还有另外一个值 0
。
如果在子元素的css样式中添加 flex-shrink
属性, 然后把值改为 0,那么当前元素就不会被其他子元素挤压。
示例代码:
<div className="lists"> <div className="lists-item">{item1}</div> <div className="lists-item">{item2}</div> <div className="lists-item">{item3}</div> <div className="lists-item">{item4}</div> <div className="lists-item">{item5}</div> <div className="lists-item">{item6}</div> </div>
.lists { min-width: 100%; height: 100%; overflow-x: scroll; display: flex; .lists-item { flex-shrink: 0; width: 130px; height: 130px; background: #ffffff; } }