Bewegen in einem flexiblen Behälter zur nächsten Zeile letztes Element

Question

ich diese Struktur in meinem HTML-Code habe:

<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, mit den gleichen Spalten wie 1 2 3 in der zweiten Linie 4 5 6 zu haben, wie so:

1 2 3 
4 5 6 

Die Struktur des HTML-Codes kann nicht geändert werden.

Answer 1

Den Behälter auf flex-wrap auftragen.

Wenden Sie flex: 1 0 33% auf die ersten drei untergeordneten divs an.

Zum vierten Div gelten flex-basis: 100%; display: flex.

An die Kinder des vierten Div gelten flex: 1 0 33%.

Die Idee besteht darin, das vierte Element zum Umbrechen zu zwingen, dann müssen die untergeordneten Elemente das Verhalten der untergeordneten Elemente im primären Container replizieren.

Answer 2

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

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

Referenzen:

CSS Tricks | Flex

Force n items, SO