总是用 flexbox 包裹至少两个项目答案

【问题标题】：Always wrap at least two items with flexbox总是用 flexbox 包裹至少两个项目
【发布时间】：2015-05-22 07:15:00
【问题描述】：

它有一个带有flex-flow: row wrap; 的 flexbox 容器来包装所有项目。这几乎就是我想要的。

当它开始换行时，第 6 项会换行到第二行：

1 2 3 4 5
    6

但我总是想在它开始包装时至少包装两个项目，这样你就不会在一行上有一个项目：

1 2 3 4
  5 6

【问题讨论】：

有趣的事实：在排版中，当句子的最后一个单词被换行到下一行时，它被称为“孤儿”。在荷兰语中，这是“hoerenjong”。这基本上就是问题所在，是吗？
是的，这就是问题所在。我确实知道 CSS 有孤儿，但这仅适用于您所说的文本。如果它适用于弹性块，那就太好了。 PS。关于荷兰语的好事实，不知道。我们很奇怪。
我记得这是在某些邮件列表上讨论过的未来 flexbox 级别（没有找到它的链接），到目前为止我看不到使用当前 flexbox 调整换行的选项选项/属性，值。
有趣的对话。实际上它似乎是一个“寡妇”，“孤儿”在开始。这将我带到了这个有趣的页面：demosthenes.info/blog/946/…，但我无法在 codepen 中得到任何工作：codepen.io/Olivvv/pen/KpgeWV

标签： css flexbox

【解决方案1】：

虽然不是最优雅的解决方案，但您可以将最后两个元素包装在另一个 flexbox 中：

<html>
    <head>
        <style>
            .flex {
                display: flex;
                flex-wrap: wrap;
            }
            .flex > div {
                flex: 1 0 auto;
                padding: 20px;
                text-align: center;
            }
            .flex .flex {
                padding: 0;
                flex-grow: 2;
            }
        </style>
    </head>
    <body>
        <div class="flex">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div class="flex">
                <div>5</div>
                <div>6</div>
            </div>
        </div>
    </body>
</html>

在这里看一支笔：https://codepen.io/anon/pen/prodVd

【讨论】：

这样会从 flexbox 中移除整个柔性部分
你可以尝试用 js 注入第二个 flex-container。正如我所说，不优雅，但它似乎工作。不过，我希望看到更好的纯 CSS 解决方案。
这有一个缺点：当 1 2 3 - 在第一行； 4 - 在第二行； 5 6 - 在第三行；因为 4 和 5&6 不适合一行

【解决方案2】：

我想出了一种用于内联元素的方法，但是当与内联块一起使用时，它会表现得inconsistently across browsers。仍然不是解决方案，但也许有人可以找到一种方法使其与内联块元素一起运行。

.item {
  display: inline;
}

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

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

这是一个Fiddle，它正在运行。

【讨论】：

这是一个非常有趣的解决方案。不确定它是否适用于我的旧案例（因为它是 2 年前的），但它可以满足我的要求。

【解决方案3】：

这是一种应该在元素宽度固定的约束下工作的方法

假设宽度为50px：

.container {
  display: flex;
  flex-flow: row wrap; 
}

.flex-item: {
  width: 50px;
  display: block;
}

.flex-item:nth-child(even) {
  translateX(100%)
  margin-left: -100px;
}

.flex-item:nth-child(odd) {
  margin-right: 50px;
}

诀窍是基本上将每个第二个元素的“足迹”移动到其前身（负边距）中，仍将其显示在其原始位置（翻译）并让前身吃掉剩余的空间（正边距）换行。

【讨论】：

如果元素的宽度可变怎么办？用JS检测宽度是唯一的办法吗？

【解决方案4】：

您可以尝试用 flex 容器包装 2 个同级元素

【讨论】：

您能进一步解释一下吗？请记住，其他人应该能够从您的回答中学习