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/

Answer 1

align-self: flex-end; 只有"列",在您的情况下,您有两个选项:

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

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

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

编辑
你现在编辑你的问题是3盒,你可以看看这个小提琴,

.a {
  background-color: red;
}
.b {
  background-color: cyan;
}
.c {
  background-color: deepskyblue;
  margin-left: auto;
}

Answer 2

更新答案

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

演示

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

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

这里是 flex 属性的好资源。

小提琴

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

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