Full width and multiple columns using flexbox

Question

I am trying to create a flexbox row with full width and multiple columns in one container.

I tried flex-break: after; but not sure what I am missing. I am trying to avoid multiple classes such as .fullwidth and .multiple-columns .

This is what I am trying to achieve:

 ------------------------ | | | | | item A | | | | | ------------------------ | | | | | | | B | C | | | | | | | ------------------------ | | | | | item D | | | | | ------------------------ 

 .collage { position: relative; display: flex; justify-content: flex-start; align-items: center; } .fullwidth { flex-break: after; } .collage-item { width: 100%; height: 25vw; background: url("https://www.audi.co.uk/content/dam/audi/production/Models/NewModelsgallery/A5range/A5_Coupe/MY17/1920x1080_A5-Coupe-2016-side.jpg") no-repeat; background-size: cover; } .btn { position: absolute; border: 2px solid white; padding: 10px 18px; text-align: center; right: 8px; bottom: 8px; color: white; text-decoration: none; } 

 <div class="collage"> <!-- fullwidth --> <div class="collage-item fullwidth"></div> <!-- two columns --> <div class="collage-item"></div> <div class="collage-item"></div> <!-- fullwidth --> <div class="collage-item fullwidth"></div> <div class="btn">Button</div> </div> 

https://jsfiddle.net/brunodd/ja6820vu/1/

Answer 1

You need to install flex-wrap: wrap in the flex container, and then flex: 0 0 100% on full-width elements and flex: 0 0 50% on half-width elements. You should also add box-sizing: border-box .

 * { box-sizing: border-box; } .collage { display: flex; flex-wrap: wrap; } .collage-item { border: 1px solid black; flex: 0 0 50%; padding: 10px; } .fullwidth { flex: 0 0 100%; } 

 <div class="collage"> <!-- fullwidth --> <div class="collage-item fullwidth">a</div> <!-- two columns --> <div class="collage-item">b</div> <div class="collage-item">c</div> <!-- fullwidth --> <div class="collage-item fullwidth">d</div> </div>