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

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

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>

最佳答案

如果您将.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>

关于css - 如果CSS有足够的空间，则将两个元素推到同一行上？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42124897/