flex布局失效

  • Z时代
  • 2024-02-12
  • 分类：IT

 <div class="info-img">
      <img :src="item" class="info-img-item" v-for="(item,index) in commentInfo.images" :key="index">
    </div>
.info-img{
  display: flex;
  margin-left: 10px;
  width:300px
}
.info-img-item{
  flex: 1;
   /* width: 115px; */
    /* flex-basis: 0px; */
     /* overflow: hidden; */
    /* min-width: 100px;  */
}

效果图如下：
flex布局失效

按道理来说，这几张图片应该平分父元素的300px，但是失效了。如果给图片设置固定宽度，总宽度大于父元素，也不会进行缩放。但是，如果给子元素设置overflow：hidden，就可以正常平分了。
请问上述问题是为什么呢？

回答：

推荐一本书《CSS新世界》，里面有一章讲解了宽度高度的默认计算方式。

简单来说，就是默认情况下，图片有内容，会自动 fit-content；而你 overflow:hidden 之后，就变成 min-content。

以上是 flex布局失效 的全部内容， 来源链接： utcz.com/p/937591.html

回到顶部