html - 将最后一个元素移动到 flex 容器中的下一行

Question

我的 HTML 代码中有这个结构:

<div style="display:flex">
    <div class="div_first">1</div>
    <div class="div_second">2</div>
    <div class="div_third">3</div>
    <div class="div_next_line">
      <div class="div_first">4</div>
      <div class="div_second">5</div>
      <div class="div_third">6</div>
    </div>
</div>

是否可以在第二行使用与 1 2 3 相同的列的 4 5 6，如下所示:

1    2    3
4    5    6

HTML 代码的结构无法更改。

Answer 1

将 flex-wrap 应用于容器。

将 flex: 1 0 33% 应用于前三个子 div。

对第四个 div 应用 flex-basis: 100%;显示:flex.

对第四个 div 的子元素应用 flex: 1 0 33%。

想法是强制第四个元素包装，然后让其子项复制主容器中子项的行为。