Flex-box：将最后一行与网格对齐

Question

我有一个简单的 flex-box 布局，其中包含一个容器，例如：

 .grid {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

现在我希望最后一行中的项目与其他项目对齐。 justify-content: space-between; 应该使用，因为可以调整网格的宽度和高度。

目前它看起来像

在这里，我希望右下角的项目位于“中间列”中。实现这一目标的最简单方法是什么？这是一个显示此行为的小 jsfiddle 。

 .exposegrid {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.exposetab {
  width: 100px;
  height: 66px;
  background-color: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(0, 0, 0, 0.4);
  border-radius: 5px;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
  margin-bottom: 10px;
}

 <div class="exposegrid">
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
</div>

原文由 Thorben Croisé 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

添加一个 ::after 自动填充空间。无需污染您的 HTML。这是一个显示它的代码笔： http ://codepen.io/DanAndreasson/pen/ZQXLXj

 .grid {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.grid::after {
  content: "";
  flex: auto;
}

原文由 Dan Andreasson 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

正如其他海报所提到的那样——没有一种干净的方法可以将最后一行与 flexbox 左对齐（至少按照当前规范）

然而，就其价值而言：使用 CSS 网格布局模块，这非常容易生成：

基本上相关的代码归结为：

 ul {
  display: grid; /* 1 */
  grid-template-columns: repeat(auto-fill, 100px); /* 2 */
  grid-gap: 1rem; /* 3 */
  justify-content: space-between; /* 4 */
}

1）使容器元素成为网格容器

1. 将网格设置为宽度为 100px 的自动列。 （请注意 自动填充 的使用（与 auto-fit - 它（对于 1 行布局）将空轨道折叠为 0 - 导致项目扩展以占用剩余空间。这将导致在合理的“间隔”布局中，当网格只有一行时，在我们的例子中这不是我们想要的。（查看 此演示 以了解它们之间的区别））。

2. 为网格行和列设置间隙/间距 - 在这里，因为想要一个“间隔”布局 - 间隙实际上是最小间隙，因为它会根据需要增长。

3. 类似于flexbox。

 ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, 100px);
  grid-gap: 1rem;
  justify-content: space-between;

  /* boring properties */
  list-style: none;
  background: wheat;
  padding: 2rem;
  width: 80vw;
  margin: 0 auto;
}

li {
  height: 50px;
  border: 1px solid green;
}

 <ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

Codepen Demo （调整大小看效果）

原文由 Danield 发布，翻译遵循 CC BY-SA 4.0 许可协议