将最后一个元素移动到弹性容器中的下一行答案

【问题标题】：Move last element to next line in a flex container将最后一个元素移动到弹性容器中的下一行
【发布时间】：2017-09-18 23:54:22
【问题描述】：

我的 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 代码的结构不能改变。

【问题讨论】：

标签： html css flexbox

【解决方案1】：

将flex-wrap 应用于容器。

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

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

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

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

【讨论】：

谢谢，弹性基础：100% 帮助我。

【解决方案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 Tricks | Flex

Force n items, SO

【讨论】：

我说我不能改变 HTML 代码的结构，你提供了改变结构的例子。