Bewegen Sie dann das Letzte element, um die nächste Zeile in ein flex-container

Habe ich diese Struktur in meinem HTML-code:

<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>

Ist es möglich, die 4 5 6 in der zweiten Zeile mit den gleichen Spalten wie 1 2 3, etwa so:

1    2    3
4    5    6

Die Struktur der HTML-code kann nicht geändert werden.

InformationsquelleAutor yAnTar | 2016-06-06

16

Gelten flex-wrap auf den container.

Gelten flex: 1 0 33% zu den ersten drei untergeordnete divs.

Dem vierten div anwenden flex-basis: 100%; display: flex.

Den Kindern der vierten div anwenden flex: 1 0 33%.

Der Grundgedanke ist der, das vierte Element zu wickeln, dann haben die Kinder repliziert das Verhalten der Kinder in der primary-container,.
- Dank der, flex-basis: 100% der mir hilft.
InformationsquelleAutor Michael_B

Verwenden flex-wrap für die Eltern und flex-basis für die Kinder:

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);
}