如何将flex行用于不同高度的元素

Question

例如，我正在尝试堆叠具有不同高度的块，如下所示：

.container {
  display: flex;
  flex-flow: row wrap;
}
.box {
  width: 50%;
  height: 50px;
  background-color: lightgreen;
}
.box2 {
  width: 50%;
  height: 25px;
  background-color: lightgreen;
}

<div class="container">
  <div class="box"></div>
  <div class="box2"></div>
  <div class="box2"></div>
</div>

怎么样：

Answer 1

另一种解决方案（但对于这种情况而言比通用解决方案更多的是黑客）是保留你拥有的所有内容并调整最后一个元素的边距。

当然，保证金最高值将取决于其他价值

.container {
  display: flex;
  flex-flow: row wrap;
}
.box {
  width: 50%;
  height: 50px;
  background-color: lightgreen;
}
.box2 {
  width: 50%;
  height: 25px;
  background-color: red;
}
.box2:last-child {
  margin-left:auto;
  margin-top:-25px;
}

<div class="container">
  <div class="box"></div>
  <div class="box2"></div>
  <div class="box2"></div>
</div>

Answer 2

据我所知，只有将两个<div class="box2">嵌入<div class="box">包装中才能解决这个问题

.container {
  display: flex;
  flex-flow: row wrap;
}

.box {
  width: 50%;
  height: 50px;
  background-color: lightgreen;
}

.box2 {
  width: 100%;
  height: 25px;
  background-color: lightgreen;
}

<div class="container">
  <div class="box"></div>
  <div class="box">
    <div class="box2"></div>
    <div class="box2"></div>
  </div>
</div>

这是一个例子：https://jsfiddle.net/7j6uknck/2/

Answer 3

另一个解决方案为该特定方案提供了一个有效的flexbox示例。

但是，如果flexbox不是必需的，并且您不想更改html结构，则可以使用float作为特定布局。

.container { 
}
.box {
float:left;
  width: 50%;
  height: 50px;
  background-color: lightgreen;
}
.box2 {
  float:right;
  width: 50%;
  height: 25px;
  background-color: lightgreen
}

<div class="container">
  <div class="box"></div>
  <div class="box2"></div>
  <div class="box2"></div>
</div>