yAnTar yAnTar - 6 months ago 17
HTML Question

Move last element to next line in a flex container

I have this structure in my 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>


Is it possible to have 4 5 6 in second line with the same columns as 1 2 3, like so:

1 2 3
4 5 6


The structure of HTML code I can't change.

Answer

Apply flex-wrap to container.

Apply flex: 1 0 33% to the first three child divs.

To the fourth div apply flex-basis: 100%; display: flex.

To the children of the fourth div apply flex: 1 0 33%.

The idea is to force the fourth item to wrap, then have its children replicate the behavior of the children in the primary container.