请教flex四列布局最后一行的处理问题?

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

阅读 17.9k
7 个回答
.my-row:after {
    content: '';
    width: 275px;
}

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

虽然是2年前了.
还是提供一种新的方案吧.

思路一致,同样是用占位元素.

以vue为例

    <ul class="list">
      <li class="item" v-for="item in list"></li>
      <li class="item holder" v-for="i in holder"></li>
    </ul>

list的长度不定,那么可以用一个计算属性holder来动态生成占位元素,算法如下

computed: {
      holder() {
        return 4 - (this.list.length % 4);
      },
}

有多少列就%多少

.holder再添加opacity: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>

用grid布局

display: grid;
grid-template-columns: repeat(auto-fit, 275px);
gap: 0 20px;
justify-content: space-between;
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题