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

问题描述

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

所以，给出下面的代码，你会看到第一行适合6个元素，第二行适合2个。

  .thumbnails {display：flex;保证金：0;填充：0; list-style-type：none; flex-flow：排行; width：640px; height：400px; justify-content：space-between;}。thumbnail {width：100px; height：100px;背景：#ccc; border：1px solid＃000;}  

< ul class = 缩略图 > < 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;保证金：0;填充：0; list-style-type：none; flex-flow：排行; width：640px; height：400px; justify-content：space-between;}。thumbnails :: after {content：; flex：auto;}。thumbnail {width：100px; height：100px;背景：#ccc; border：1px solid＃000;}

< ul class = 缩略图 > < 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;保证金：0;填充：0; list-style-type：none; flex-flow：排行; width：640px; height：400px; justify-content：space-between;}。thumbnails :: after {content：; flex-grow：1;}。thumbnail {width：100px; height：100px;背景：#ccc; border：1px solid＃000;}  

< ul class = 缩略图 > < 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 ：
$ b

  .thumbnails {display：flex;保证金：0;填充：0; list-style-type：none; flex-flow：排行; width：640px; height：400px; justify-content：space-between;}。thumbnails :: after {content：; margin-right：auto;}。thumbnail {width：100px; height：100px;背景：#ccc; border：1px solid＃000;}  

< ul class = 缩略图 > < 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

有没有其他方法可以实现我所需要的，而不是在物品之间使用虚拟元素或固定边距？

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

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

同时，我们需要用你也列出了这些方法。

还有一些选项需要考虑：（第二个选项主要是FYI，因为大多数浏览器还没有完成实现） p>

• Desandro Masonry

  
  

  砌体是一个JavaScript网格布局库。它
  的工作原理是根据可用的
  垂直空间将元素放置在最佳位置，有点像镶嵌在墙上的泥瓦匠的石匠。
  
  

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




• CSS网格布局模块级别1
  
  

  
  

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

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

  
  

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.

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.

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

So does 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

And so does 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.

解决方案

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

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

• Desandro Masonry

  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.

  ^{source: http://masonry.desandro.com/}

• CSS Grid Layout Module Level 1

  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.

  ^{source: https://drafts.csswg.org/css-grid/}

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