关于flexbox的一个问题

flexbox布局有一个很奇怪的地方, 设置一个item的min-height: 0 会导致不同的排序情况

<a class="pdd-thumb" layout layout-align="center center">
  <div class="pdd-thumb__hd">
    <img :src="imageUrl" alt="" v-if="imageUrl">
  </div>
  <div class="pdd-thumb__bd" flex>
    <h4 class="pdd-thumb__title">{{title}}</h4>
    <slot name="desc">
      <p class="pdd_thumb__desc" v-if="desc">
        {{desc}}
      </p>
    </slot>
    
  </div>

</a>
.pdd-thumb {
  color: #000000;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  align-items: center;
  padding: 15px;
  position: relative;
}

.pdd-thumb__hd {
    margin-right: .8em;
    width: 60px;
    height: 60px;
    line-height: 60px;
    text-align: center;
}

其中layout 属性选择器开启flexbox上下文, 有两个子项目 flex属性悬着器 具体值是 flex: 1;
如果给pdd-thumb__bd设置min-width: 0 的话 效果如下图

clipboard.png

**如果取消掉这个值得话 第一个项目
缩为0clipboard.png
*

![图片上传中...]

阅读 1k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题