如何使flexbox中的包装项目水平对齐到右侧？答案

【问题标题】：How to make wrapped items in flexbox horizontally align to the right side?如何使flexbox中的包装项目水平对齐到右侧？
【发布时间】：2017-12-02 11:12:46
【问题描述】：

我有两个 div 在一个 flexbox 内。当水平上有足够的空间让它们放在同一条线上时，它们看起来像这样：

当我使用 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>

【问题讨论】：

标签： html css responsive-design flexbox

【解决方案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>

以下是其工作原理的解释：

In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?

【讨论】：

【解决方案2】：

从父级中删除justify-content，并在其中一个子级上使用margin 来分隔它们，然后在.green 上使用align-self: flex-end 将其与底部对齐。

.flexbox{
  display:flex;
  flex-wrap: wrap;
}

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

.green{
  min-height:50px;
  min-width:300px;
  background-color:green;
  align-self: flex-end;
  margin-left: auto;
}

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

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

</html>

【讨论】：

【解决方案3】：

我已经编辑了你的代码，我添加了 flex-direction:column; 而不是 wrap，然后为每个弹性项目定义了 align-self

.flexbox{
  display:flex;
  flex-direction:column;
}

.blue{
  min-height:50px;
  min-width:300px;
  background-color:blue;
  align-self: flex-start;
}

.green{
  min-height:50px;
  min-width:300px;
  background-color:green;
  align-self:flex-end;
}

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

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

</html>

【讨论】：