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 the HTML code cannot be changed.
Justify ContentFlex Start positions element at the start of the page. Flex End sets the element to the end of the page. Space Around arranges the items evenly but with spaces between them. The spaces will be equal among all the elements inside a flex-box container, but not outside them.
We can set break-before: column; on each 'head' element, where the column value means: Always force a column break before the generated box.
Apply flex-wrap
to the 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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With