css - 允许一个 flex 元素换行到多行

Question

我有无法更改的 HTML，类似于以下内容。我需要使用 Flexbox 来重新排序元素(并在最后一项之前强制“换行”)。我怎样才能使大多数 flex 元素被视为原子单元，但特别是那个 - #c 在这个例子中 - 允许与前一个元素在同一行开始并且然后像标准 display:inline 元素一样自动换行？

section {
   display: flex;
   flex-wrap: wrap;
   width: 450px;
   background:orange;
   padding:0.2em;
}
span {
   background:yellow;
   padding:2px 4px;
   border-radius:3px;
   border:1px solid rgba(0,0,0,50%);
   margin:0 3px;
}
#a { order:1 }
#b { order:2 }
#c {
   order:3;
   background:none;
   border:none;
}
section::before {
   content:'';
   order:4;
   width:100%;
}
#d { order:5 }

<section>
<span id="c">with an earthquake, birds and snakes and aeroplanes, and Lenny Bruce is not afraid</span>
<span id="a">That's great</span>
<span id="b">it starts</span>
<span id="d">— R.E.M.</span>
</section>

为了更加清楚，在上面的示例中，我希望“That's great it starts with an earthquake”都在同一行，但文本换行到下一行，最后是“— R.E.M.”被迫到自己的行上。

Answer 1

我认为您只能使用一些 hack 来近似它。可能没有通用的解决方案

section {
   display: flex;
   flex-wrap: wrap;
   width: 450px;
   background:orange;
   padding:0.2em;
}
span {
   background:yellow;
   padding:2px 4px;
   border-radius:3px;
   border:1px solid rgba(0,0,0,50%);
   margin:0 3px;
}
#a { order:1 }
#b { order:2 }
#c {
   order:3;
   background:none;
   border:none;
   /* added this*/
    margin-top: -1.2em;
    text-indent: 148px;
    /**/
}

section::before {
   content:'';
   order:4;
   width:100%;
}
#d { order:5 }

<section>
<span id="c">with an earthquake, birds and snakes and aeroplanes, and Lenny Bruce is not afraid</span>
<span id="a">That's great</span>
<span id="b">it starts</span>
<span id="d">— R.E.M.</span>
</section>