彈性框：將最後一行與網格對齊

本文翻譯自：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> 

---

#1樓

參考：https://stackoom.com/question/1GeDE/彈性框-將最後一行與網格對齊

---

#2樓

You can't. 你不能 Flexbox is not a grid system. Flexbox不是網格系統。 It does not have the language constructs to do what you're asking for, at least not if you're using justify-content: space-between . 它沒有語言構造來完成您要的工作，至少在使用justify-content: space-between 。 The closest you can get with Flexbox is to use the column orientation, which requires setting an explicit height: 使用Flexbox可以獲得的最接近的結果是使用列方向，這需要設置一個明確的高度：

http://cssdeck.com/labs/pvsn6t4z (note: prefixes not included) http://cssdeck.com/labs/pvsn6t4z （注意：不包括前綴）

ul {
  display: flex;
  flex-flow: column wrap;
  align-content: space-between;
  height: 4em;
}

However, it would be simpler to just use columns, which has better support and doesn't require setting a specific height: 但是，僅使用列會更簡單，因爲列具有更好的支持，並且不需要設置特定的高度：

http://cssdeck.com/labs/dwq3x6vr (note: prefixes not included) http://cssdeck.com/labs/dwq3x6vr （注意：不包括前綴）

ul {
  columns: 15em;
}

---

#3樓

One technique would be inserting a number of extra elements (as many as the max number of elements you ever expect to have in a row) that are given zero height. 一種技術是插入數量爲零的額外元素（與您期望連續擁有的元素的最大數量一樣多）。 Space is still divided, but superfluous rows collapse to nothing: 空間仍然是分開的，但是多餘的行摺疊成零：

http://codepen.io/dalgard/pen/Dbnus http://codepen.io/dalgard/pen/Dbnus

 body { padding: 5%; } div { overflow: hidden; background-color: yellow; } ul { display: flex; flex-wrap: wrap; margin: 0 -4px -4px 0; list-style: none; padding: 0; } li { flex: 1 0 200px; height: 200px; border-right: 4px solid black; border-bottom: 4px solid black; background-color: deeppink; } li:empty { height: 0; border: none; } *, :before, :after { box-sizing: border-box; } 

 <div> <ul> <li>a</li> <li>b</li> <li>c</li> <li>d</li> <li>e</li> <li>f</li> <li>g</li> <li>h</li> <li>i</li> <li>j</li> <li>k</li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> 

In the future, this may become achievable through using multiple ::after(n) . 將來，可以通過使用多個::after(n) 。

---

#4樓

There is a way without flexbox, although you'd need to meet the following conditions. 有一種沒有flexbox的方法，儘管您需要滿足以下條件。 1) The container has padding. 1）容器有填充物。 2) Items are the same size and you know exactly how many you want per line. 2）項目大小相同，並且您確切知道每行要多少個。

ul {
  padding: 0 3% 0 5%;
}
li {
  display: inline-block; 
  padding: 0 2% 2% 0;
  width: 28.66%;
}

The smaller padding on the right side of the container allows for the extra padding to the right of each list item. 容器右側的較小填充可以在每個列表項的右側添加額外的填充。 Assuming other items in the same parent as the list object are padded with 0 5%, it will be flush with them. 假設與列表對象在同一父級中的其他項填充0 5％，則將與它們齊平。 You can also adjust the percentages to however much margin you'd like or use calculate px values. 您還可以將百分比調整爲所需的餘量，或使用計算px值。

Of course, you can do the same without the padding on the container by using nth-child (IE 9+) to remove margin on every third box. 當然，您可以通過使用nth-child（IE 9+）來刪除第三個框上的邊距，而無需對容器進行填充而執行相同的操作。

---

#5樓

A possible solution is to use justify-content: flex-start; 一種可能的解決方案是使用justify-content: flex-start; on the .grid container, size restrictions on its children, and margins on the appropriate child elements -- depending on the desired number of columns. 在.grid容器上，對其子級的大小限制以及適當的子元素的邊距-取決於所需的列數。

For a 3-column grid, the basic CSS would look like this: 對於三列網格，基本CSS如下所示：

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

.grid > * {
    flex: 0 0 32%;
    margin: 1% 0;
}

.grid > :nth-child(3n-1) {
    margin-left: 2%;
    margin-right: 2%;
}

It's another imperfect solution, but it works. 這是另一個不完善的解決方案，但它可以工作。

http://codepen.io/tuxsudo/pen/VYERQJ http://codepen.io/tuxsudo/pen/VYERQJ

---

#6樓

Using flexbox and a few media queries, I made this little work-around: http://codepen.io/una/pen/yNEGjv (its a bit hacky but works): 使用flexbox和一些媒體查詢，我做了以下小變通方法： http ://codepen.io/una/pen/yNEGjv（雖然有點笨拙，但是可以工作）：

.container {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  max-width: 1200px;
  margin: 0 auto;
}

.item {
  background-color: gray;
  height: 300px;
  flex: 0 30%;
  margin: 10px;

  @media (max-width: 700px) {
     flex: 0 45%;
  }

  @media (max-width: 420px) {
    flex: 0 100%;
  }

  &:nth-child(3n-1) {
    margin-left: 10px;
    margin-right: 10px;
  }
}