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 al

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

1)

.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;
    }

2)

.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;
}