对齐最后一个 flexbox 行中的元素 [英] Aligning elements in last flexbox row

问题描述

我知道这里已经多次问过这个问题，但不幸的是，没有一个解决方案真正有效，也许有更好的方法可以同时实现我所需要的.

I know this question has been asked several times here, but unfortunately, none of the solutions really works and maybe there's a better way of achieving what I need in the meanwhile.

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

So, given the following code, you will see that the first row fits 6 elements and the second row fits 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

我想要实现的是让第一行的元素像代码一样填充空间，但第二行的元素应该根据第一行排列.

What I would like to achieve is have the elements of the first row fill the space as in the code, but the elements in the second row should line up based on the first line.

使用带有 flex: auto 的 after 伪元素就像在下面的代码中一样会弄乱最后一行中两个元素之间的间距.

Using an after pseudo-element with flex: auto like in the following code will screw up the spacing between the two elements in the last row.

.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

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

Is there any other way I can achieve what I need than to use dummy elements or fixed margins between the items?

我想保持灵活性，因为我不知道有多少商品可用以及它们有多大.

I would like to remain flexible because I don't know how many items will be available and what size they have.

推荐答案

看来您已经涵盖了当前 flexbox 中可用的大多数(如果不是全部)最后一行对齐的方法.

It appears you've covered most, if not all, methods for last-row alignment available in current flexbox.

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

Hopefully, a future iteration of the spec will include alignment properties such as last-row, last-column, only-child-in-a-row, etc.

与此同时，我们需要使用您列出的方法对其进行破解.

In the meanwhile, we need to hack it with the methods you've listed.

还有这些选项需要考虑:(第二个选项主要是仅供参考，因为大多数浏览器尚未完成实施.)

There are also these options to consider: (The second option is mostly FYI, as most browsers haven't completed implementation.)

• 德桑德罗砌体

Masonry 是一个 JavaScript 网格布局库.它通过根据可用将元素放置在最佳位置来工作垂直空间，有点像石匠在墙上安装石头.

Masonry is a JavaScript grid layout library. It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall.

^{来源:http://masonry.desandro.com/}

CSS 网格布局模块级别 1

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

This CSS module defines a two-dimensional grid-based layout system, optimized for user interface design. In the grid layout model, the children of a grid container can be positioned into arbitrary slots in a predefined flexible or fixed-size layout grid.

^{来源:https://drafts.c​​sswg.org/css-grid/}

这篇关于对齐最后一个 flexbox 行中的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！