Squares in squares with flexbox - css

Question

I am trying to recreate the following layout with flexbox:
I am almost there layout wise, but I am getting some weird flex-wrap behaviour like this:
My css is as follows:
.parent {
display: flex;
justify-content: space-between;
.square-container {
width: calc(33% - 1.333px);
display: flex;
flex-wrap: wrap;
justify-content: space-between;
&:before {
content:'';
float:left;
padding-top:100%;
}
.small-square {
width: calc(50% - 2px);
height: calc(50% - 2px);
background: red;
flex-shrink: 0;
}
}
}
The html is as follows:
<div class="parent">
<div class="square-container">
<div class="small-square"></div>
<div class="small-square"></div>
<div class="small-square"></div>
<div class="small-square"></div>
</div>
<div class="square-container">
<div class="small-square"></div>
<div class="small-square"></div>
<div class="small-square"></div>
<div class="small-square"></div>
</div>
<div class="large-square"></div>
</div>
I feel that I am missing some important flexbox property here. Thank you for your help!

Answer 1

You can do it quite easily:
.flex {
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 210px;
justify-content: space-between;
width: 650px;
}
.small {
width: 100px;
height: 100px;
background: red;
}
.large {
width: 210px;
height: 210px;
background: red;
}
<div class="flex">
<div class="small"></div>
<div class="small"></div>
<div class="small"></div>
<div class="small"></div>
<div class="large"></div>
<div class="small"></div>
<div class="small"></div>
<div class="small"></div>
<div class="small"></div>
</div>
Update
Fully responsive with current html:
.parent {
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.parent:after {
content: '';
display: block;
width: 0;
background: blue;
padding-top: 33.3333%;
}
.square-container {
width: calc(33.33333% - 5px);
flex-grow: 1;
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: space-between;
}
.small-square {
width: calc(50% - 5px);
height: calc(50% - 10px);
background: red;
}
.large-square {
margin: 0 10px 10px 10px;
flex-grow: 1;
width: 33.33333%;
background: red;
order: 2;
}
.square-container:first-child {
order: 1;
}
.square-container:nth-child(2n) {
order: 3;
}
<div class="parent">
<div class="square-container">
<div class="small-square"></div>
<div class="small-square"></div>
<div class="small-square"></div>
<div class="small-square"></div>
</div>
<div class="square-container">
<div class="small-square"></div>
<div class="small-square"></div>
<div class="small-square"></div>
<div class="small-square"></div>
</div>
<div class="large-square"></div>
</div>

Answer 2

No changes to the HTML:
.parent {
display: flex;
}
.square-container {
flex: 1;
display: flex;
justify-content: space-around;
align-content: space-between;
flex-wrap: wrap;
}
.small-square {
flex: 0 0 45%;
height: 100px;
background-color: red;
}
.large-square {
flex: 1;
height: 210px;
margin: 0 5px;
background-color: red;
}
.square-container:nth-child(2) {
order: 1;
}
<div class="parent">
<div class="square-container">
<div class="small-square"></div>
<div class="small-square"></div>
<div class="small-square"></div>
<div class="small-square"></div>
</div>
<div class="square-container">
<div class="small-square"></div>
<div class="small-square"></div>
<div class="small-square"></div>
<div class="small-square"></div>
</div>
<div class="large-square"></div>
</div>
jsFiddle