Question

我正在尝试在flex容器中使第一个元素之后的最后一个元素“浮动”。

三个项目，每个项目的宽度为50%，显示在中。
每行两个元素。

第二（2）项比第一项高。
第三项（3）不是紧随第一项（1）之后。它出现在第二个项目的高度之后。
是否可以使第三个元素紧随第一个元素之后？（第二个元素的高度不应影响第三个元素）

（我知道可以使用float来做到这一点。）

.flex-parent {
  display   : flex;
  flex-wrap : wrap;
}

.flex-item {
  width    : 50%;
  height   : 150px;
}

.flex-parent .flex-item:first-child {
  background: green;
}
.flex-parent .flex-item:nth-child(2) {
  background  : orange;
  height      : 200px;
}
.flex-parent .flex-item:last-child {
  background: yellow;
}

<div class="flex-parent">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
</div>

在行中的项目之后灵活调整项目掉落（浮动）

0 个答案: