Question

我有两个div在flexbox中。当水平空间足够大以使它们适合同一条线时，它们看起来像这样：

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

我希望绿色的一个对齐到右侧，但是当在flexbox中进行包装时，它作为蓝色的一个存在于单独的一行上。它看起来像这样：

如何使用flexbox执行此操作？

以下是代码：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

从父级移除justify-content，然后在其中一个子级上使用margin将其分开，然后使用align-self: flex-end上的.green将其与底部对齐。

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

Answer 2

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

您唯一需要做的就是将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?

如何使flexbox中的包装物品水平对齐到右侧？

3 个答案: