如何使Flexbox中的包裹项目水平对齐到右侧？

Question

我有两个 div 位于弹性盒内。当水平方向有足够的空间让它们位于同一行时，它们看起来像这样：

当我使用 css 属性时flex-wrap: wrap，两个 div 将出现在不同的行上，同时向左浮动：

我希望绿色的与右侧对齐，但当在 Flexbox 中进行换行时，绿色的与蓝色的一样存在于单独的一行上。它看起来像这样：

我如何使用 Flexbox 做到这一点？

这是代码：

.flexbox {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.blue {
  min-height: 50px;
  min-width: 300px;
  background-color: blue;
}

.green {
  min-height: 50px;
  min-width: 300px;
  background-color: green;
}

<div class="flexbox">
  <div class="blue"></div>
  <div class="green"></div>
</div>

Answer 1

您唯一需要做的就是添加margin-left: auto到.green.

.flexbox {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.blue {
  min-height: 50px;
  min-width: 300px;
  background-color: blue;
}

.green {
  margin-left: auto; /* NEW */
  min-height: 50px;
  min-width: 300px;
  background-color: green;
}

<div class="flexbox">
  <div class="blue"></div>
  <div class="green"></div>
</div>

这是其工作原理的解释：

• 在CSS Flexbox中，为什么没有“justify-items”和“justify-self”属性？