Right-align items in a flex container - html

Question

I have a div container (black outline) which contains 4 divs of equal length and height.
I want the 4 colored divs to be aligned right with equal spaces between them (assuming that each colored div is about 49.5% the height of container and width of each div is about 25% of container).
I tried to do this with flex but I'm not getting what I want.
Can someone please help me? Thank you so much in advance.
<div class="container">
<div class="blue"></div>
<div class="red"></div>
<div class="purple"></div>
<div class="green"></div>
</div>
.container { }
.blue { }
.red { }
.purple { }
.green { }

Answer 1

Because it seems that you have two columns inside a row, I suggest you use three flexboxes for this occasion.
Here is how this works:
.container (outer flexbox, flex-direction: row)
-------------------------------------------------------------------
| .innerContainer | .innerContainer | .innerContainer |
-------------------------------------------------------------------
.innerContainer (inner flexbox, flex-direction: column)
--------------- --------------- --------------
| (empty) | | .blue | | .red |
--------------- | .purple | | .green |
--------------- --------------
Also, all flex-box children were set to flex-grow: 1 so that they are all equal dimensions and they fill up the entire space.
.container {
display: flex;
flex-direction: row;
background-color: #e9e9e9;
height: 100px;
}
.innerContainer {
display: flex;
flex-direction: column;
}
.blue, .red, .purple, .green, .innerContainer {
flex-grow: 1;
margin: 2px 1px;
}
.blue {
background-color: blue;
}
.red {
background-color: red;
}
.purple {
background-color: purple;
}
.green {
background-color: green;
}
<div class="container">
<div class="innerContainer"></div>
<div class="innerContainer">
<div class="blue"></div>
<div class="purple"></div>
</div>
<div class="innerContainer">
<div class="red"></div>
<div class="green"></div>
</div>
</div>

Answer 2

* { box-sizing: border-box; }
.container {
display: flex; /* create flex container */
flex-direction: column; /* align children vertically */
flex-wrap: wrap; /* allow multiple columns */
align-content: flex-end; /* shift columns to container end */
height: 100px;
width: 400px;
border: 2px solid black;
}
.container > div {
margin: 5px; /* equal spacing between divs */
width: calc(25% - 10px); /* width less margin */
height: calc(50% - 10px); /* height less margin */
}
.blue { background-color: blue; }
.purple { background-color: purple; }
.red { background-color: red; }
.green { background-color: green; }
<div class="container">
<div class="blue"></div>
<div class="purple"></div>
<div class="red"></div>
<div class="green"></div>
</div>
jsFiddle