Flexbox - align-self：水平伸缩

Question

如何将 div.c 与下面的 flexbox 对齐？

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

规则 align-self: flex-end; 似乎将框与底部对齐，即使 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>

在这里查看小提琴： https ://jsfiddle.net/rootnode/m5hyxLhb/7/

原文由 anmatika 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

align-self: flex-end; 只进入“列”，在你的情况下你有两个选择：

1. justify-content: space-between; 上 .container ， 小提琴

2. 删除两个元素上的 align-self 并在 --- 上使用 margin-left: auto; .b ， 小提琴

.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 个框，您可以看看这个 小提琴，

 .a {
  background-color: red;
}

.b {
  background-color: cyan;
}

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

原文由 Dejan.S 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

更新的答案

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

演示

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

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

这里 是 flex 属性的一个很好的资源。

小提琴

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

原文由 sol 发布，翻译遵循 CC BY-SA 3.0 许可协议