css - 如果 CSS 有足够的空间，将两个元素推到同一行？

Question

在这个 jsfiddle 中，您会看到第二个 block 下有足够的空间容纳第三个 block 。是否可以将第三个 block 推到第二个 block 下面，以便只有两行？

https://jsfiddle.net/byokdm8o/

.list {
  display: flex;
  flex-flow: row wrap;
  width: 20rem;
}

.item {
  height: 5rem;
  width: 5rem;
  background-color: blue;
  margin: .2rem;
}

.item:nth-child(1) {
  height: 10rem;
  width: 10rem;
}

<div class="list">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Answer 1

如果您将 .item 向左浮动，它们将以这种方式堆叠。

.list {
  width: 20rem;
}

.item {
  height: 5rem;
  width: 5rem;
  background-color: blue;
  margin: .2rem;
  float: left;
}

.item:nth-child(1) {
  height: 10rem;
  width: 10rem;
}

<div class="list">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>