将弹性项目对齐到右侧

Question

我有一个容器，里面有3个盒子：黄色，绿色和红色。

我将display:flex提供给容器，并为开始时的项目提供了justify-content:flex-start。

我想将红色框移到最后，所以我将margin-right: auto移到黄色框中，以便红色框可以移动到结尾（不确定这是否是将红色框移动到底的确切方法，如果不是我也想要帮助。）

所以问题是：我想在容器的垂直中间放置绿色框，我想将它移动到最右边，就像红色框一样（但应该在容器的中间） ）

如何使用弹性框进行操作？

.container {
  height: 500px;
  width: 500px;
  background-color: royalblue;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}
.yellowbox {
  color: black;
  height: 100px;
  width: 100px;
  background-color: yellow;
  margin-right: auto;
}
.greenbox {
  color: black;
  height: 100px;
  width: 100px;
  background-color: green;
  align-self: center;
  margin-left: auto;
}
.redbox {
  color: black;
  height: 100px;
  width: 100px;
  background-color: red;
}

<div class="container">
  <div class="yellowbox">
    <p>the white text</p>
  </div>
  <div class="greenbox">
    <p>the black text</p>
  </div>
  <div class="redbox">
    <p>the red text</p>
  </div>
</div>

这是我的CODEPEN LINK：http://codepen.io/ShamZ/pen/pRLELP

Answer 1

您可能会增加部分margin，但您必须允许flex个孩子wrap。并使用order将绿色框放在最后位置

＆＃13;

＆＃13;

.container {
  height: 500px;
  width: 500px;
  background-image:linear-gradient(to left,rgba(0,0,0,0.2) 50%,rgba(0,0,0,0.1) 50%),linear-gradient(to top,rgba(0,0,0,0.2) 50%,rgba(0,0,0,0.1) 50%);
  background-color: royalblue;
  display: flex;
  flex-direction: row;
  flex-wrap:wrap;
  justify-content:space-between;
}
.yellowbox {
  color: black;
  height: 100px;
  width: 100px;
  background-color: yellow;
  margin-right: 50%;
}
.greenbox {
  order:1;
  color: black;
  height: 100px;
  width: 100px;
  background-color: green;
  margin: -100px 0 auto auto;
}
.redbox {
  margin:0 0 0 auto;
  color: black;
  height: 100px;
  width: 100px;
  background-color: red;
}

＆＃13;

<div class="container">
  <div class="yellowbox">
    <p>the white text</p>
  </div>
  <div class="greenbox">
    <p>the black text</p>
  </div>
  <div class="redbox">
    <p>the red text</p>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

http://codepen.io/gc-nomade/pen/Qdmpbb