Right-align Items In A Flex Container

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

Solution 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>

Solution 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