css - 从奇数行 flexbox 多行内容中移除间隙

Question

我有一个产品图 block 网格，我正在使用 flex 显示，基于此代码笔高度相同:https://codepen.io/imohkay/pen/gpard
它们是 3 宽的。然而，在最后一个“行”上，当只剩下 2 个瓷砖时，最后一个瓷砖被推到右边，就好像有 3 个瓷砖一样。我想不出正确的 css 设置以使其位于第二列。

截图:https://pasteboard.co/Hk699jP.png

#products {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-content: stretch;
}

.product {
    width: 33.3%;
}

Answer 1

它们相互推开，因为您在 justify-content 属性上使用了 space-between 选项。

将 space-between 更改为 flex-start 或将 display 更改为 grid 布局。

fiddle (flex-box https://jsfiddle.net/swordys/db7dzkcx )

fiddle (网格 https://jsfiddle.net/swordys/65cyr3tu/ )