保持最后两个元素包装在一起

Question

我有一个动态生成的UL/LI列表，其中包含可变数量的元素，水平显示。我想设置我的 CSS，以便在需要包装时，列表中的最后两个元素始终包装在一起。

标记：

<ul>
<li>A</li>
<li>B</li>
...
</ul>

输出

Displays in one line when there's enough space: 
A B C D E F G
Breaks like this first when shorter:
A B C D E
F G
This is fine, too:
A B C D
E F G
NEVER THIS:
A B C D E F
G

列表使用的空间是响应式的，元素是动态的，因此固定宽度无济于事。我无法控制标记，因为它来自 CMS。我的列表项当前是浮动的，但更改为 flex 或内联块就可以了。

这在纯 CSS 中可能吗？

Answer 1

这

在CSS中是可能的。

1. 将ul的最小宽度设置为最后两个元素所需的空间。
2. 将倒数第二个li的右边距设置为等于最后一个li的宽度。
3. 将最后一个li的左边距设置为等于其宽度的负数。

示例小提琴

CSS：

ul {
  min-width: 4em;
}
li {
  float: left;
  width: 2em;
}
li:nth-last-of-type(2) {
  margin-right: 2em;
}
li:nth-last-of-type(1) {
  margin-left: -2em;
}

Answer 2

使用弹性换行属性，它会自动调整间距。

ul{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}