Flex-box：将最后一行与网格对齐 - Flex-box: Align last row to grid

问题：

I have a simple flex-box layout with a container like:我有一个简单的 flex-box 布局，带有一个容器，如：

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

Now I want the items in the last row to be aligned with the other.现在我希望最后一行中的项目与另一行对齐。 justify-content: space-between; should be used because the width and height of the grid can be adjusted.应该使用，因为可以调整网格的宽度和高度。

Currently it looks like目前看起来像

Here, I want the item in the bottom right to be in the "middle column".在这里，我希望右下角的项目位于“中间列”中。 What is the simplest way to accomplish that?实现这一目标的最简单方法是什么？ Here is a small jsfiddle that shows this behaviour.这是一个显示这种行为的小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>

---

解决方案：

参考一： https://stackoom.com/question/1GeDE
参考二： Flex-box: Align last row to grid