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

在将来，通过使用多个::after(n).

Answer 2

正如其他海报所提到的，没有干净的方法使最后一行与柔性盒对齐(至少按照当前的规范)。

然而，对于它的价值：使用CSS网格布局模块令人惊讶的是，这很容易产生：

基本上，相关的代码归结为：

ul {
  display: grid; /* 1 */
  grid-template-columns: repeat(auto-fill, 100px); /* 2 */
  grid-gap: 1rem; /* 3 */
  justify-content: space-between; /* 4 */}

1)使容器元素成为网格容器

2)设置宽度为100 px的自动列的网格。(注意使用自动填充(以.为目的)auto-fit-它(对于1行布局)将空轨道折叠为0-导致项目展开以占用剩余空间。这将导致一个合理的“间隔”布局时，网格只有一行，在我们的情况下，这不是我们想要的。(退房这个演示(看他们之间的区别)。

3)为网格行和列设置间隙/排水沟-在这里，因为希望在布局之间有“间隔”，所以间隙实际上是最小的间隙，因为它会根据需要增长。

4)与柔性箱相似。

ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, 100px);
  grid-gap: 1rem;
  justify-content: space-between;
  
  /* boring properties */
  list-style: none;
  background: wheat;
  padding: 2rem;
  width: 80vw;
  margin: 0 auto;}li {
  height: 50px;
  border: 1px solid green;}

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li></ul>

Codepen演示(调整大小以查看效果)