flex布局子元素宽度被压缩

最新推荐文章于 2024-05-18 16:20:54 发布

好了来看下一题

最新推荐文章于 2024-05-18 16:20:54 发布

阅读量1.5k

点赞数 1

分类专栏： css 文章标签： css html css3

本文链接：https://blog.csdn.net/weixin_44785498/article/details/125876808

版权

css 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

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;
  }
}