Question

我知道这个问题已在这里被多次询问，但不幸的是，没有一个解决方案真的有效，也许有更好的方法可以实现我所需要的。

因此，给定以下代码，您将看到第一行适合6个元素，第二行适合2。

.thumbnails {
  display: flex;
  margin: 0;
  padding: 0;
  list-style-type: none;
  flex-flow: row wrap;
  width: 640px;
  height: 400px;
  justify-content: space-between;
}
.thumbnail {
  width: 100px;
  height: 100px;
  background: #ccc;
  border: 1px solid #000;
}

<ul class="thumbnails">
  <li class="thumbnail"></li>
  <li class="thumbnail"></li>
  <li class="thumbnail"></li>
  <li class="thumbnail"></li>
  <li class="thumbnail"></li>
  <li class="thumbnail"></li>
  <li class="thumbnail"></li>
  <li class="thumbnail"></li>
</ul>

jsFiddle

我想要实现的是让第一行的元素填充代码中的空格，但第二行中的元素应该基于第一行排列。

在下面的代码中使用带有flex: auto的after伪元素会搞砸最后一行中两个元素之间的间距。

.thumbnails {
  display: flex;
  margin: 0;
  padding: 0;
  list-style-type: none;
  flex-flow: row wrap;
  width: 640px;
  height: 400px;
  justify-content: space-between;
}
.thumbnails::after {
  content: "";
  flex: auto;
}
.thumbnail {
  width: 100px;
  height: 100px;
  background: #ccc;
  border: 1px solid #000;
}

<ul class="thumbnails">
  <li class="thumbnail"></li>
  <li class="thumbnail"></li>
  <li class="thumbnail"></li>
  <li class="thumbnail"></li>
  <li class="thumbnail"></li>
  <li class="thumbnail"></li>
  <li class="thumbnail"></li>
  <li class="thumbnail"></li>
</ul>

jsFiddle

flex-grow: 1：

也是如此

.thumbnails {
  display: flex;
  margin: 0;
  padding: 0;
  list-style-type: none;
  flex-flow: row wrap;
  width: 640px;
  height: 400px;
  justify-content: space-between;
}
.thumbnails::after {
  content: "";
  flex-grow: 1;
}
.thumbnail {
  width: 100px;
  height: 100px;
  background: #ccc;
  border: 1px solid #000;
}

<ul class="thumbnails">
  <li class="thumbnail"></li>
  <li class="thumbnail"></li>
  <li class="thumbnail"></li>
  <li class="thumbnail"></li>
  <li class="thumbnail"></li>
  <li class="thumbnail"></li>
  <li class="thumbnail"></li>
  <li class="thumbnail"></li>
</ul>

jsFiddle

margin-right: auto也是如此：

.thumbnails {
  display: flex;
  margin: 0;
  padding: 0;
  list-style-type: none;
  flex-flow: row wrap;
  width: 640px;
  height: 400px;
  justify-content: space-between;
}
.thumbnails::after {
  content: "";
  margin-right: auto;
}
.thumbnail {
  width: 100px;
  height: 100px;
  background: #ccc;
  border: 1px solid #000;
}

<ul class="thumbnails">
  <li class="thumbnail"></li>
  <li class="thumbnail"></li>
  <li class="thumbnail"></li>
  <li class="thumbnail"></li>
  <li class="thumbnail"></li>
  <li class="thumbnail"></li>
  <li class="thumbnail"></li>
  <li class="thumbnail"></li>
</ul>

jsFiddle

除了在项目之间使用虚拟元素或固定边距之外，还有其他方法可以实现我的需求吗？

我希望保持灵活性，因为我不知道有多少项目可用，以及它们的大小。

Answer 1

看来你已经涵盖了当前flexbox中可用的最后行对齐的大多数方法（如果不是全部的话）。

希望未来的规范迭代将包括对齐属性，例如last-row，last-column，only-child-in-a-row等。

与此同时，我们需要用你列出的方法来破解它。

还有一些选项需要考虑:(第二个选项主要是FYI，因为大多数浏览器尚未完成实施。）

Desandro Masonry


Masonry是一个JavaScript网格布局库。它   基于可用的元素将元素放置在最佳位置   垂直空间，有点像石匠在墙上贴石头。

^{来源：http://masonry.desandro.com/}
CSS Grid Layout Module Level 1

此CSS模块定义了一个基于网格的二维布局系统，针对用户界面设计进行了优化。在网格布局模型中，网格容器的子节点可以放置在预定义的灵活或固定大小的布局网格中的任意插槽中。

^{来源：https://drafts.csswg.org/css-grid/}

对齐最后一个flexbox行中的元素

1 个答案: