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: 2px1px;
}
.blue {
  background-color: blue;
}
.red {
  background-color: red;
}
.purple {
  background-color: purple;
}
.green {
  background-color: green;
}

<divclass="container"><divclass="innerContainer"></div><divclass="innerContainer"><divclass="blue"></div><divclass="purple"></div></div><divclass="innerContainer"><divclass="red"></div><divclass="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; }

<divclass="container"><divclass="blue"></div><divclass="purple"></div><divclass="red"></div><divclass="green"></div></div>

jsFiddle