Question

我正在学习使用Flexbox进行布局，现在，假设我在flexbox容器中有10个div，我怎样才能让它在第7个div处换行到下一行并保持第2个div占用剩余的可用空间？ / p>

像这样（当屏幕宽度小于800px时）：

|1|    2    |3|4|5|6|
|  7 |  8 |  9 | 10 |

|1|2|3|4|5|6|7|8|9|10|大于800px时

Answer 1

您无法指定使用flexbox包装的确切元素。但是，你可以使用flex-basis: xx%;和一些试验'错误来使它像你想要的那样包裹。

这是一个工作样本，有10个盒子在线，800px +宽度，它包裹在第七个元素之后，因为flex-basis: 12%;，其余三个盒子填充剩余空间。但是请注意，当您进一步缩小屏幕时，包装将更改为第6个元素之后（由于百分比性质），因此您需要在该状态周围进行额外的媒体查询。

Working example on Codepen.

Flexbox，正如其名称所说，是灵活的 - 它并不是真正意义上的限制 - 但是现在没有更好的方法来制造这种行为。

<强> HTML

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

<强> CSS

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

.box {
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: 12%;
  height: 50px;
  margin: 5px;

  background-color: red;
}

@media all and (min-width: 800px) {
  .box {
    flex: 1;
  }
}

记住您的供应商前缀。

如何在flexbox中指定要包装的元素

1 个答案: