Flexbox - align-self: flex-end horizontally

Question

How to align div.c to the right end with flexbox like below?

+--------------+ |A B C | +--------------+

The rule align-self: flex-end; seems to align the box to the bottom even though flex-direction: row;

+--------------+ |A B | | C | +--------------+

CSS:

.container {
  border: 2px solid;
  height: 500px;
  display: flex;
  flex-direction: row; 
}
.box {
  border: 1px solid;
  height: 200px;
  width: 50px;
}
.a {
  background-color: red;
  align-self: flex-start;
}
.b {
  background-color: cyan;
  align-self: flex-start
}
.c {
 background-color: green;
 align-self: flex-end;
} 

HTML:

<div class="container">
  <div class="box a">
  </div>
  <div class="box b">
  </div>
  <div class="box c">
  </div>
</div>

See the fiddle here: https://jsfiddle.net/rootnode/m5hyxLhb/7/

Answer 1

align-self: flex-end; only goes "column", in your case you have two options:

1. justify-content: space-between; on .container, fiddle

2. remove the align-self on both elements and use margin-left: auto; on .b, fiddle

.container {
  border: 2px solid;
  height: 500px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.box {
  border: 1px solid;
  height: 200px;
  width: 50px;
}

.a {
  background-color: red;
}

.b {
  background-color: cyan;
}

.container {
  border: 2px solid;
  height: 500px;
  display: flex;
  flex-direction: row; 
}

.box {
  border: 1px solid;
  height: 200px;
  width: 50px;
}

.a {
  background-color: red;
}

.b {
  background-color: cyan;
  margin-left: auto;
}

EDIT
now that you edited your question to be 3 boxes you can have a look at this fiddle,

.a {
  background-color: red;
}

.b {
  background-color: cyan;
}

.c {
  background-color: deepskyblue;
  margin-left: auto;
}

Answer 2

Updated answer

As per new question, align a single item to the right by adding margin-left: auto; to that item.

Demo

Original answer Use the justify-content property on your container.

.container {
  -webkit-justify-content: space-between;
  justify-content: space-between;
}

A good resource for flex properties here.

Fiddle

.container {
  border: 2px solid;
  height: 500px;
  display: flex;
  flex-direction: row;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}
.box {
  border: 1px solid;
  height: 200px;
  width: 50px;
}
.a {
  background-color: red;
  align-self: flex-start;
}
.b {
  background-color: cyan;
  align-self: flex-end;
}

<div class="container">
  <div class="box a">
  </div>
  <div class="box b">
  </div>
</div>