始终使用flexbox包装至少两个项目

Question

看看这个例子

它有一个Flexbox容器,flex-flow: row wrap;用于包装所有项目.这几乎就是我想要的.

当它开始换行时,第6项包裹到第二行:

1 2 3 4 5
    6

但总是我想在开始包装时至少包装两件物品,这样你就不会有一件物品在一条线上:

1 2 3 4
  5 6

Answer 1

我找到了一种针对内联元素执行此操作的方法，但是当与内联块一起使用时，它会在浏览器之间表现不一致。仍然不是解决方案，但也许有人可以找到一种方法使其与内联块元素一起运行。

.item {
  display: inline;
}

.item::before {
  content: ' ';
  font-size: 0;
}

.item:last-child::before {
  content: '';
}

这是一个正在运行的小提琴。