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 的话 效果如下图
**如果取消掉这个值得话 第一个项目
缩为0
*
![图片上传中...]