原先效果
<div class="flex-container">
<div class="item">仓库失火烧毁大量老坛酸菜牛肉面1</div>
<div class="item">仓库失火烧毁大量老坛酸菜牛肉面2</div>
<div class="item">仓库失火烧毁大量老坛酸菜牛肉面3</div>
<div class="item">仓库失火烧毁大量老坛酸菜牛肉面4</div>
<div class="item">仓库失火烧毁大量老坛酸菜牛肉面5</div>
</div>
.flex-container {
padding-top: 20px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
.item {
width: 120px;
background: pink;
flex-shrink: 0;
margin-bottom: 10px;
padding: 6px;
box-sizing: border-box;
}
}
实现最后一行左对齐,只需要给父元素加上一个伪类元素,宽度同子元素的宽度即可
.flex-container:after {
content: "";
width: 120px;
}
最终效果如下