是否可以将单个Flexbox项目设置为多行？

Question

我想使用CSS flexbox实现这个精确的UI：

我的DOM看起来像这样：

<container>
  <item>The</item>
  <item>Quick</item>
  <item>brown fox jumps over the lazy</item>
  <item>dog</item>
</container>

请注意，有些项目的长度足够长，而其他项目足够短，应该在同一条线上。

我知道实现此UI只有一种方法，那就是删除项目之间的空白：

<container>
  <item>The</item><item>Quick</item><item>brown fox jumps over the lazy</item><item>dog</item>
</container>

<style>
container {
  max-width: 150px;
  display: block;
}

item {
  color: white;
  padding: 7px;
  line-height: 2.0;
  display: inline;
}

item:nth-child(1) {
  background: red;
}

item:nth-child(2) {
  background: green;
}

item:nth-child(3) {
  background: orange;
}

item:nth-child(4) {
  background: blue;
}
</style>

这在两个帐户上留下了一些需要：

1. 强制单行上的所有项目使DOM难以阅读，尤其是在更复杂的场景中。
2. 需要修改线高以达到所需的高度。

我很乐意使用CSS Flexbox来实现这个精确的UI，但我找不到让Flexbox像这样包装多行的方法。可能吗？

Answer 1

这是一个复杂的方法来完成你使用flexbox所要求的并保持相同的html结构，这不仅仅是可能的。你can't just break a flex-item to wrap在不同的行中。如果你想让它们换行，首先需要be a seperate item。

我修改了html以演示如何使用它来实现它。

container {
  display: flex;
  flex-wrap: wrap;
}

break {
  flex-basis: 100%;
  width: 0px;
  height: 0px;
  overflow: hidden;
  display: inline-block;
}

item:nth-child(n+1) {
  background: red;
}

item:nth-child(n+2) {
  background: green;
}

item:nth-child(n+3){
  background: yellow;
}
item:nth-child(n+8){
  background: blue;
}

<container>
  <item>The</item>
  <item>Quick</item>
  <item>brown</item>
  <break></break>
  <item>fox jumps over the </item>
  <break></break>
  <item>lazy</item>
  <item>dog</item>
</container>