Move last element to next line in a flex container

Question

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.

Michael Benjamin · Accepted Answer · 2017-09-18T15:54:22.143

52

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.

edited Sep 18 '17 at 15:54

answered Jun 06 '16 at 14:57

Michael Benjamin

346,931
104
581
701

2

Thanks, flex-basis: 100% helps me. – yAnTar Jun 06 '16 at 17:03

score 12 · Answer 2 · edited May 23 '17 at 10:29

12

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:

CSS Tricks | Flex

Force n items, SO

edited May 23 '17 at 10:29

Community

1
1

answered Jun 06 '16 at 14:20

theblindprophet

7,767
5
37
55

I said that I can't change structure of HTML code, you provided example with changed structure. – yAnTar Jun 06 '16 at 14:51

Move last element to next line in a flex container

2 Answers2