Replace item with new line / line using flexbox

Question

I have a problem formatting an item on the next line in a flexbox layout.

How can I do something like the following image?

This is what I got so far:

#wrap { display: flex; width: 86vw; height: auto; box-sizing: border-box; margin: 0 auto; } .item1, .item2 { width: 50%; height: 24.5vw; background: #4add69; } .item1 { margin-right: 10px; } .item2 { margin-left: 10px; } .item3 { width: 60%; height: 40vw; background: #d56c6c; } 

 <div id="wrap"> <div class="item1"></div> <div class="item2"></div> <div class="item3"></div> </div> 

Answer 1

Your code is fine, but two things are missing.

• Use flex-wrap: wrap to create a new line. Change the width of the first two elements present on the same line.

• For the last two elements you need to put it in a container and then wrap them again.

Manage dimensions (width, height) and field values ​​to achieve an ideal / suitable layout.

JSfiddle Demo

 * { margin: 0; padding: 0; } body { background: #232323; padding: 10px; } #wrap { display: flex; width: 86vw; height: auto; box-sizing: border-box; margin: 0 auto; flex-wrap: wrap; background: #232323; /* Added */ } .item1, .item2 { width: 48%; /* Modified */ height: 24.5vw; background: #4add69; margin-bottom: 10px; } .item1 { margin-right: 10px; } .item2 { margin-left: 10px; } .item3 { width: 55%; height: 40vw; background: #d56c6c; margin-right: 10px; } .nested-items { display: flex; width: 42%; flex-wrap: wrap; align-content: space-between; } .item4, .item5 { background: lightblue; width: 100%; height: 49%; } 

 <div id="wrap"> <div class="item1"></div> <div class="item2"></div> <div class="item3"></div> <div class="nested-items"> <div class="item4"></div> <div class="item5"></div> </div> </div> 

Answer 2

Essentially, you need an additional wrapping div for two “small” elements, for example:

 * { margin: 0; padding: 0; box-sizing: border-box; } .wrap { width: 75%; margin: 1em auto; border: 1px solid green; padding: .25em; display: flex; flex-wrap: wrap; } .wrap div { border: 1px solid grey; margin-bottom: 1px; } .box { height: 80px; background: lightblue; flex: 0 0 50%; } .tall { flex: 0 0 65%; height: 160px; } .col { flex: 0 0 35%; display: flex; flex-wrap: wrap; } .mini { flex: 0 0 100%; height: 80px; background: pink; } 

 <div class="wrap"> <div class="box"></div> <div class="box"></div> <div class="box tall"></div> <div class="box col"> <div class="mini"></div> <div class="mini"></div> </div> </div> 

I used one common element here with packaging, but the image suggests that it would be much simpler with the actual lines and the extra wrapper mentioned earlier.

Codepen demo of the second option with strings.