我之前的回答不正确：

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中找到的类似问题一样）是在<br>属性中不使用\A而是content:，并且另外，以下列方式格式化由::after（或::before）创建的元素的样式：

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

虽然这段代码确实在通过将content:属性分配给::after所选元素而创建的“匿名元素”中插入换行符，但它并没有解决这个问题。 flex布局中的{1}}元素。

同样，对我以前的错误答案表示歉意。我保留了之前的答案，以解释为什么这是错误的，并为此答案提供更多背景信息。

其他资源：

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

我之前的回答不正确：

为什么： <div> 语句不会在所选元素之后放置项目。相反，它将其参数放在一个匿名元素中，然后将其附加到所选元素的现有内容中。有关 .class::after {content: "";} 标记的说明，请参阅this site;有关 ::after this page >属性。

您可以添加样式：

content:

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

在flexbox

1 个答案:

其他资源：

我之前的回答不正确：