弹性框：将最后一行与网格对齐

本文翻译自：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;
  }
}