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

Question

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

我有一个简单的弹性箱布局，容器如下：

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

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

目前看来

在这里，我希望右下角的项目在“中间栏”。实现这一目标的最简单方法是什么？这里有一个小的小提琴这表明了这种行为。

.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>

Answer 1

一种方法是插入多个额外的元素(尽可能多的元素数)，这些元素被赋予零高度。空间仍然是分裂的，但多余的行却一文不值：http://codepen.io/dalgard/pen/Dbnusbody {&nbsp; padding: 5%;}div {&nbsp; overflow: hidden;&nbsp; background-color: yellow;}ul {&nbsp; display: flex;&nbsp; flex-wrap: wrap;&nbsp; margin: 0 -4px -4px 0;&nbsp; list-style: none;&nbsp; padding: 0;}li {&nbsp; flex: 1 0 200px;&nbsp; height: 200px;&nbsp; border-right: 4px solid black;&nbsp; border-bottom: 4px solid black;&nbsp; background-color: deeppink;}li:empty {&nbsp; height: 0;&nbsp; border: none;}*,:before,:after {&nbsp; box-sizing: border-box;}<div>&nbsp; <ul>&nbsp; &nbsp; <li>a</li>&nbsp; &nbsp; <li>b</li>&nbsp; &nbsp; <li>c</li>&nbsp; &nbsp; <li>d</li>&nbsp; &nbsp; <li>e</li>&nbsp; &nbsp; <li>f</li>&nbsp; &nbsp; <li>g</li>&nbsp; &nbsp; <li>h</li>&nbsp; &nbsp; <li>i</li>&nbsp; &nbsp; <li>j</li>&nbsp; &nbsp; <li>k</li>&nbsp; &nbsp; <li></li>&nbsp; &nbsp; <li></li>&nbsp; &nbsp; <li></li>&nbsp; &nbsp; <li></li>&nbsp; &nbsp; <li></li>&nbsp; &nbsp; <li></li>&nbsp; &nbsp; <li></li>&nbsp; &nbsp; <li></li>&nbsp; &nbsp; <li></li>&nbsp; &nbsp; <li></li>&nbsp; </ul></div>在将来，通过使用多个::after(n).

Answer 2

正如其他海报所提到的，没有干净的方法使最后一行与柔性盒对齐(至少按照当前的规范)。然而，对于它的价值：使用CSS网格布局模块令人惊讶的是，这很容易产生：基本上，相关的代码归结为：ul&nbsp;{ &nbsp;&nbsp;display:&nbsp;grid;&nbsp;/*&nbsp;1&nbsp;*/ &nbsp;&nbsp;grid-template-columns:&nbsp;repeat(auto-fill,&nbsp;100px);&nbsp;/*&nbsp;2&nbsp;*/ &nbsp;&nbsp;grid-gap:&nbsp;1rem;&nbsp;/*&nbsp;3&nbsp;*/ &nbsp;&nbsp;justify-content:&nbsp;space-between;&nbsp;/*&nbsp;4&nbsp;*/}1)使容器元素成为网格容器2)设置宽度为100 px的自动列的网格。(注意使用自动填充(以.为目的)auto-fit-它(对于1行布局)将空轨道折叠为0-导致项目展开以占用剩余空间。这将导致一个合理的“间隔”布局时，网格只有一行，在我们的情况下，这不是我们想要的。(退房这个演示(看他们之间的区别)。3)为网格行和列设置间隙/排水沟-在这里，因为希望在布局之间有“间隔”，所以间隙实际上是最小的间隙，因为它会根据需要增长。4)与柔性箱相似。ul&nbsp;{ &nbsp;&nbsp;display:&nbsp;grid; &nbsp;&nbsp;grid-template-columns:&nbsp;repeat(auto-fill,&nbsp;100px); &nbsp;&nbsp;grid-gap:&nbsp;1rem; &nbsp;&nbsp;justify-content:&nbsp;space-between; &nbsp;&nbsp; &nbsp;&nbsp;/*&nbsp;boring&nbsp;properties&nbsp;*/ &nbsp;&nbsp;list-style:&nbsp;none; &nbsp;&nbsp;background:&nbsp;wheat; &nbsp;&nbsp;padding:&nbsp;2rem; &nbsp;&nbsp;width:&nbsp;80vw; &nbsp;&nbsp;margin:&nbsp;0&nbsp;auto;}li&nbsp;{ &nbsp;&nbsp;height:&nbsp;50px; &nbsp;&nbsp;border:&nbsp;1px&nbsp;solid&nbsp;green;}<ul> &nbsp;&nbsp;<li></li> &nbsp;&nbsp;<li></li> &nbsp;&nbsp;<li></li> &nbsp;&nbsp;<li></li> &nbsp;&nbsp;<li></li> &nbsp;&nbsp;<li></li> &nbsp;&nbsp;<li></li></ul>Codepen演示(调整大小以查看效果)