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