使用flexbox将元素换行到新行/行

Question

I have trouble forcing an item into the next row 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 missing two things.

1. Use flex-wrap: wrap to create a new row. Modify the width of the first two items to be present in a single row.

2. For the last two items, you need to nest it inside a container and then wrap them again.

Manipulate the dimension(width, height) and margin values to achieve the perfect/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 extra wrapping div for the two 'small' elements like so:

 * { 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've used a single overall element here with wrapping but the image suggests that this would be much simpler with actual rows and the extra wrapper mentioned before.

Codepen Demo of 2nd option with rows.