CSS - need to arrange this img layout - css

Question

I've been struggling to arrange this layout of images.
I've been thinking of using flexbox and i'm pretty sure it's doable with it but I can't manage to find the right way to do it.
If anyone is able to help me i'll be glad.
Here is the layout with each square being an img in a link tag :
img layout
The space between each img must be the same, that's why I've been thinking of using flexbox.
Thanks in advance,
j
Edit: I uploaded what I've been working on :
http://163.172.185.65/flexboxuse.html

Answer 1

Flexbox example with percentage:
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
html,
body {
width: 100%;
height: 100%;
}
.container {
height: 100%;
width: 100%;
display: flex;
flex-flow: row wrap;
}
.sidebar {
background: limegreen;
height: 70%;
width: 30%;
}
.rightCont {
height: 70%;
width: 70%;
display: flex;
flex-flow: row wrap;
}
.red {
background: red;
height: calc(50% - 10px);
width: calc(50% - 10px);
margin-left: 10px;
margin-bottom: 10px;
}
.blue {
background: blue;
height: calc(50% - 10px);
width: calc(50% - 10px);
margin-left: 10px;
margin-bottom: 10px;
}
.yellow {
background: yellow;
height: 50%;
width: calc(50% - 10px);
margin-left: 10px;
}
.sky {
background: cyan;
height: 50%;
width: calc(50% - 10px);
margin-left: 10px;
}
.bottom {
background: violet;
height: calc(30% - 10px);
width: 100%;
margin-top: 10px;
}
<div class="container">
<div class="sidebar"></div>
<div class="rightCont">
<div class="red"></div>
<div class="blue"></div>
<div class="yellow"></div>
<div class="sky"></div>
</div>
<div class="bottom"></div>
</div>

Answer 2

You could approach this with flexbox, but even just float:left will do the trick.
Working Example:
section {
width: 312px;
}
div {
float: left;
width: 100px;
height: 100px;
margin: 0 6px 6px 0;
background-color: gray;
}
div:nth-of-type(1) {
height: 206px;
}
div:nth-of-type(6) {
width: 312px;
margin-bottom: 0;
}
div:nth-of-type(3),
div:nth-of-type(5),
div:nth-of-type(6) {
margin-right: 0;
}
div:nth-of-type(1) {
background-color: lime;
}
div:nth-of-type(2) {
background-color: red;
}
div:nth-of-type(3) {
background-color: blue;
}
div:nth-of-type(4) {
background-color: yellow;
}
div:nth-of-type(5) {
background-color: cyan;
}
div:nth-of-type(6) {
background-color: magenta;
}
<section>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</section>
Second approach (this time with element heights relative to the height of the viewport)
section {
width: calc(100vh + 12px);
}
div {
float: left;
width: 33vh;
height: 33vh;
margin: 0 6px 6px 0;
background-color: gray;
}
div:nth-of-type(1) {
height: calc(66vh + 6px);
}
div:nth-of-type(6) {
width: calc(100vh + 12px);
margin-bottom: 0;
}
div:nth-of-type(3),
div:nth-of-type(5),
div:nth-of-type(6) {
margin-right: 0;
}
div:nth-of-type(1) {
background-color: lime;
}
div:nth-of-type(2) {
background-color: red;
}
div:nth-of-type(3) {
background-color: blue;
}
div:nth-of-type(4) {
background-color: yellow;
}
div:nth-of-type(5) {
background-color: cyan;
}
div:nth-of-type(6) {
background-color: magenta;
}
<section>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</section>

Answer 3

Here is a working example using flex and percentage width:
html,body{
border:0;
margin:0;
height:100%;
}
#wrap
{
width:300px;
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
}
#container
{
display:flex;
flex-direction:row;
flex-wrap:wrap;
justify-content:space-between;
height:70%;
}
#green
{
background-color:chartreuse;
width:30%;
order:0;
}
#red
{
background-color:red;
height:48%;
}
#blue
{
background-color:blue;
height:48%;
}
#yellow
{
background-color:yellow;
height:49%;
}
#aquamarine
{
background-color:aqua;
height:49%;
}
#purple
{
background-color:purple;
height:28%;
}
.col
{
width:32%;
display:flex;
flex-direction:column;
justify-content:space-between;
}
<div id="wrap">
<div id="container">
<div id="green"></div>
<div class="col">
<div id="red"></div>
<div id="yellow"></div>
</div>
<div class="col">
<div id="blue"></div>
<div id="aquamarine"></div>
</div>
</div>
<div id="purple"></div>
</div>