align-self: flex-end;只使用“column”，在您的情况下，您有两个选项：

1. justify-content: space-between;在.container上，fiddle
   1.删除两个元素上的align-self，并在.b、fiddle上使用margin-left: auto;

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

编辑

现在您已将问题编辑为3个框，您可以查看此fiddle，

.a {
  background-color: red;
}

.b {
  background-color: cyan;
}

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

• • 更新答复**

根据新问题，通过向单个项目添加margin-left: auto;，将该项目向右对齐。
Demo

• • 原始答案**使用容器上的justify-content属性。

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

Flex属性here的一个很好的资源。
Fiddle
x一个一个一个一个x一个一个二个x

如果你有flex-direction：'row'并且想在末端水平放置一个项目，只要使用margin-left:'auto'它就会相应地工作。

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

我放了一个新元素G进去。

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

设置G弹性增长：1，其他所有的代码都是一样的。

.g {
  flex-grow: 1;
}

对我很有效