将最后一个元素移动到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>

第二行中是否有4 5 6与1 2 3相同的列，如下所示：

1    2    3
4    5    6

HTML代码的结构无法更改。

Answer 1

将flex-wrap应用于容器。

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

到第四个div应用flex-basis: 100%; display: flex flex-basis: 100%; display: flex 。

对第四个div的孩子申请flex: 1 0 33% 。

想法是强制第四个项目换行，然后让它的子项复制主容器中子项的行为。

Answer 2

对子项使用flex-wrap和flex-basis ：

CSS：

.parent {
    flex-wrap: wrap;
    width: 400px;
    border: 2px solid blue;
}
.parent > .div_next_line {
    display: flex;
}
.parent > div {
    display: inline-block;
    flex-grow: 1;
    flex-basis: calc(100% / 3);
}
.parent > div > div {
    display: inline-block;
    flex-grow: 1;
    flex-basis: calc(100% / 3);
}

JSFiddle： https ：//jsfiddle.net/ghjbhjLu/1/

参考文献：

CSS技巧| 柔性

强制n项，SO