将弹性项目向右对齐答案

【问题标题】：Aligning flex items to the right将弹性项目向右对齐
【发布时间】：2017-06-18 17:55:17
【问题描述】：

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

我将display:flex 给了容器，并给了justify-content:flex-start 让项目从头开始。

我想将红色框移到末尾，所以我将margin-right: auto 给了黄色框，以便红色框可以移到末尾（不确定这是否是将红色框移到末尾的确切方法，如果不是我也需要帮助）。

所以问题是：我想要绿色盒子在容器的垂直中间，我想像红色盒子一样将它移动到最右边（但应该在容器中间)

如何使用 flex box？

.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 链接：http://codepen.io/ShamZ/pen/pRLELP

【问题讨论】：

标签： html css flexbox

【解决方案1】：

您可以增加一些margins，但您必须允许flex 子代wrap。并使用order 将绿色框放在最后位置

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

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

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

【讨论】：