Flexbox layout, columns, rows, multiple heights

Question

I wanted everything to just snap into place, but found I had to add spacing to some of the items in order to line them up. It's still neater than trying to float things, and Grid isn't ready yet. But any advice/feedback will be appreciated.

div {padding:0px;margin:0;}
.container {
 display:flex;
 width:1070px;
 min-height:500px;
 margin:0 auto;
 flex-flow:row wrap;
 justify-content:space-between;
 align-content:space-between;
 align-items:flex-start;
 box-sizing:border-box;
}
.item > .item:first-child {padding-bottom:5px;}
.full-width {padding:5px 0;}

<div class="container">
 <div class="full-width item">
 <img src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+P+/HgAFhAJ/wlseKgAAAABJRU5ErkJggg==" width="1070" height="300" alt="" />
 </div>
 <div class="full-height pink item">
 <img src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mM8x/C/HgAFvwJOOdDPcgAAAABJRU5ErkJggg==" width="530" height="610" alt="" />
 </div>
 <div class="full-height yellow item">
 <div class="half-height yellow item">
 <img src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/p+hHgAHYgJ3jYoEPgAAAABJRU5ErkJggg==" width="530" height="300" alt="" />
 </div>
 <div class="half-height green item">
 <img src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mMU+s9QDwADzgGSD7t9RQAAAABJRU5ErkJggg==" width="530" height="300" alt="" />
 </div>
 </div>
 <div class="full-width item">
 <img src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+P+/HgAFhAJ/wlseKgAAAABJRU5ErkJggg==" width="1070" height="300" alt="" />
 </div>
 <div class="full-height item">
 <div class="half-height yellow item">
 <img src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/p+hHgAHYgJ3jYoEPgAAAABJRU5ErkJggg==" width="530" height="300" alt="" />
 </div>
 <div class="half-height green item">
 <img src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mMU+s9QDwADzgGSD7t9RQAAAABJRU5ErkJggg==" width="530" height="300" alt="" />
 </div>
 </div>
 <div class="full-height pink item">
 <img src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mM8x/C/HgAFvwJOOdDPcgAAAABJRU5ErkJggg==" width="530" height="610" alt="" />
 </div>
 <div class="full-width purple item">
 <img src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mOssXtYDwAE9QIcO8pyRAAAAABJRU5ErkJggg==" width="1070" height="300" alt="" />
 </div>
 <div class="full-height item">
 <div class="half-height red item">
 <img src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mN8aGc3EQAFVQHwUBy2eQAAAABJRU5ErkJggg==" width="530" height="300" alt="" />
 </div>
 <div class="half-height blue item">
 <img src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mOssXtYDwAE9QIcO8pyRAAAAABJRU5ErkJggg==" width="530" height="530" alt="" />
 </div>
 </div>
 <div class="full-height item">
 <div class="half-height blue item">
 <img src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mOssXtYDwAE9QIcO8pyRAAAAABJRU5ErkJggg==" width="530" height="530" alt="" />
 </div>
 <div class="half-height red item">
 <img src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mN8aGc3EQAFVQHwUBy2eQAAAABJRU5ErkJggg==" width="530" height="300" alt="" />
 </div>
 </div>
</div>

https://codepen.io/wagonlips/pen/zZzLqG

• Corsair 4 Life: This explains it if I were to explain it here it would be what it says there almost exactly stackoverflow.com/questions/40689461/…

Answer 1

Use a different selector: div.subcontainer

Flexbox can work in either column or row. Because the code has a column and row you need to add another div (div.sub-container) with flexbox and change the height to the height of div.sub-container.