在flexbox内强制换行[重复]

Question

* {
  margin: 0;
  padding: 0;
}

.cnt {
  display: flex;
  margin: 50px;
  background: #ffff00;
  justify-content: space-between;
  flex-wrap: wrap;
}

.cnt div {
  width: 100px;
  height: 100px;
  background: #999;
  margin: 10px;
}

.cnt::after {
  content: '';
  width: 100%;
}

.flex-item:nth-child(6) {
  order: 1;
}

<div class="cnt">
  <div class="flex-item one"></div>
  <div class="flex-item two"></div>
  <div class="flex-item three"></div>
  <div class="flex-item four"></div>
  <div class="flex-item five"></div>
  <div class="flex-item six"></div>
</div>

我遇到的问题是我只能在最后一项上断线......我实际上如何能够在我想要的时候刹车线？比如我想在.two课后换行，怎么办？

编辑

我是个白痴。这是实际上你是怎么做的。你只需要传递你想在下一个order中的项目。显然你只能这样做一次。

因此，要在第二个框中换行，您需要将.three、.four、.five 和.six 传递给order: 1。见这里：https://jsfiddle.net/r33muub3/4/ 我将justify-content 更改为left，这样会更明显

Answer 1

经过一些广泛的研究，我发现不仅我的第一反应不正确，而且在content: 属性中添加换行符的方法也不是我所指出的。我很抱歉。

添加换行符的正确方法（正如我在this answer 中找到的类似问题）是在content: 属性中使用\A 而不是\A，另外还可以格式化元素的样式由::after（或::before）以下列方式创建：

.two::after {
  content: "\A";
  white-space: pre;
}

虽然这段代码确实完成了在通过将content: 属性分配给::after-selected 元素创建的“匿名元素”中插入换行符，但它不能解决处理<div> 元素的问题弹性布局。

再次对我之前的错误答案深表歉意。我保留了我之前的答案，以便解释为什么这是错误的，并为这个答案提供更多背景信息。

---

其他资源：

• 类似问题的另一个答案可能有助于回答这个问题：Line break in multi-line flexbox。
• 另一个关于 flexbox 换行的类似问题：Text not breaking inside of flexbox。

---

我之前的回答不正确：

为什么： .class::after {content: "";} 语句不会将项目放在所选元素之后。相反，它将其参数放在一个匿名元素中，然后将其附加到所选元素的现有内容中。有关 ::after 标签的描述，请参阅this site，有关 content: 属性的实际行为的信息，请参阅this page。

您可以添加样式：

div.two::after {content: "<br />";}

这将在每个带有class="two" 的<div> 元素之后添加一个换行符。 ::after 选择器将直接在任何匹配元素内容的末尾应用样式。在这种情况下，我们使用content: CSS 属性在<div class="two"> 之后添加一些文本、换行符(<br />)。注意换行符"<br />" 周围的引号；这些确保参数作为字符串处理。