Question

请检查此fiddle，当您调整窗口大小时以及当卡片向下时，卡片的底部看起来很奇怪，它们之间有更多空间。我希望这些卡片的底部与上面的卡片对齐。

我知道这可以通过display: inline-block轻松完成，但我尝试使用flexbox，display: flex。

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 1

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

但是有许多黑客攻击，包括使用隐形弹性物品和伪元素来占据空间，从而实现理想的对齐。

以下文章对此进行了全面介绍：

Targeting flex items on the last row

但是，使用Flex Layout的姐妹技术Grid Layout：

可以轻松实现您的布局

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

codepen

注意：

建立块级网格容器。（spec reference）
启用网格以创建适合屏幕的列数（auto-fill）。每列的最小宽度为200px，最大宽度为1fr（即，可用空间的比例;类似于flex-grow: 1）。（spec reference）
网格将自动创建新行以适应包装网格项目。每行的高度为200px。（spec reference）
grid-column-gap和grid-row-gap的简写。设置10px＆＃34;边距＆＃34;围绕每个网格项目。（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

当物品没有填满时，不要显示物品之间的差距

1 个答案: