0

有数量不定的卡片,模版遍历数据显示,父元素宽度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那种卡片居中。古请教下有没有比较好的解决办法

3个回答

0
.my-row{
    display: flex;
    display: -webkit-flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    padding: 20px;
}
.my-row .span3{
    width: 275px;
    height: 100px;
    background-color: red;
    margin: 20px 20px 20px 0;
}
<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>
0
.my-row:after {
    content: '';
    width: 275px;
}
0

建议在最后一行补上空白的元素~大多数人也都是这么做的

撰写答案