有数量不定的卡片,模版遍历数据显示,父元素宽度1160px,每个卡片275px,间距20px,最左边和最右边贴边。
如下图所示
html:
<div class="my-row">
<div class="span3">
</div>
<div class="span3">
</div>
<div class="span3">
</div>
<div class="span3">
</div>
<div class="span3">
</div>
<div class="span3">
</div>
.....(省略)
</div>
我现在用flex实现了
.my-row{
display: flex;
display: -webkit-flex;
justify-content: space-between;
-webkit-justify-content: space-between;
flex-wrap: wrap;
}
.my-row .span3{
width: 275px;
margin-left: 0;
}
但是这样的话最后一行如果不是四个元素比如3个就会因为justify-content:space-between而均匀分布,
如图:
现在希望是左对齐
如果我把justify-content改成flex-start的话,卡片之间将没有间距。如果设置margin-right:20px的话,又需要对每列最右边的卡片nth-child(4n)单独设置margin-right:0,否则最右边卡片不贴边。
这样虽然可以解决问题,但是如果窗口缩小到只显示三列的时候,nth-child(4n)的匹配就不对了,又会出现ui问题需要重新写媒体查询设置最右边卡片的margin-right,这样的话我需要针对3列,2列,1列分别写媒体查询,感觉很麻烦,而且flex-start的话缩小窗口到3列的话右边会有大片空白,不是很好的自适应,希望是space-betwen那种卡片居中。古请教下有没有比较好的解决办法