当项目没有填满行时，不要在项目之间显示很大的差距

Question

请检查此 fiddle，当您调整 window 的大小时，当卡片向下移动时，卡片的底部看起来很奇怪，它们之间有更多 space。我希望卡片的底部与上面的卡片对齐。

我知道这可以通过 display: inline-block 轻松完成，但我正在尝试使用 flexbox 来做到这一点，即 display: flex.

.parent {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.child {
  min-width: 200px;
  width: 200px;
  height: 200px;
  box-shadow: 0px 0px 0px 1px black;
}

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

Answer 1

对齐弹性容器中的最后一项可能很棘手。 flexbox 规范中目前没有内置属性或方法来定位行/列中的最后一项。

但是有很多 hack，包括使用不可见的 flex 项目和伪元素来占据 space，从而实现所需的对齐。

以下post都涵盖了：

但是，您可以使用 Flex Layout 的姊妹技术 Grid Layout 轻松实现您的布局：

.parent {
  display: grid;                                                  /* 1 */
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));   /* 2 */
  grid-auto-rows: 200px;                                          /* 3 */
  grid-gap: 10px;                                                 /* 4 */
}
.child {
  box-shadow: 0px 0px 0px 1px black;
}

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

codepen

备注：

建立块级网格容器。 (spec reference)
启用网格以创建尽可能多的列以适应屏幕 (auto-fill)。每列最小宽度为200px，最大宽度为1fr（即自由比例space；类似flex-grow: 1）。 (spec reference)
网格将自动创建新行以容纳环绕的网格项目。每行的高度为 200 像素。 (spec reference)
Shorthand grid-column-gap 和 grid-row-gap。在每个网格项周围设置 10px "margin"。 (spec reference)

浏览器支持 CSS 网格

Chrome - 截至 2017 年 3 月 8 日的全面支持（版本 57）
Firefox - 截至 2017 年 3 月 6 日的全面支持（版本 52）
Safari - 截至 2017 年 3 月 26 日的全面支持（版本 10.1）
Edge - 截至 2017 年 10 月 16 日的全面支持（版本 16）
IE11 - 不支持当前规范；支持过时版本

完整图片如下：http://caniuse.com/#search=grid

当项目没有填满行时，不要在项目之间显示很大的差距

Don't show wide gap between items when they don't fill the row

html

css

flexbox

css-grid