Css Flexbox-自对齐：水平弯曲端

如何使用flexbox将

div.c

对准右端，如下所示

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

规则

align self:flex end

似乎将框与底部对齐，即使

柔性方向：行

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

CSS:

HTML:



请看这里的小提琴：
更新答案

根据新问题，通过添加
marginleft:auto将单个项目向右对齐到该项目


原始答案
在容器上使用
justify content
属性

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

flex属性的良好资源



.container{
边框：2倍实心；
高度：500px；
显示器：flex；
弯曲方向：行；
-webkit证明内容：之间的空间；
证明内容：之间的空间；
}
.盒子{
边框：1px实心；
高度：200px；
宽度：50px；
}
.a{
背景色：红色；
自我校准：灵活启动；
}
.b{
背景色：青色；
自对准：柔性端；
}
自对准：柔性端仅显示“列”，在您的情况下，您有两个选项：

justify content:之间的空格在
容器上


移除两个元素上的
align self
，并使用
margin left:auto在
.b
上




编辑

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

如果你有灵活的方向：'行'，并希望在末尾水平放置一个项目，只需使用
左边距：'auto'
它将相应地工作。
更新的链接必须编辑我的问题，这样就有3个元素，而不是2个。其中一个往右边走，其余的留在左边。在这种情况下，无法使用justify内容。这非常有效。必须编辑我的问题，以便有3个元素而不是2个元素。其中一个往右边走，其余的留在左边。在这种情况下，无法使用justify content。您可以使用我的选项2@RootNodemargin left:auto似乎在工作，太棒了。然而，我本以为这有flexbox规则。这样，align self:flex端将遵循flex方向。我想这就是解决这个问题的方法。@RootNode是的，我对flex端感到困惑，你可以阅读flexbox over att css技巧的绝妙指南
<div class="container">
  <div class="box a">
  </div>
  <div class="box b">
  </div>
  <div class="box c">
  </div>
</div>

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

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

.a {
  background-color: red;
}

.b {
  background-color: cyan;
}

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