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.
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.
Use flex-wrap for the parent and flex-basis for the children:
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/
References:
