如何在flexbox中指定要换行的元素答案

【问题标题】：How to specify the element in flexbox to wrap如何在flexbox中指定要换行的元素
【发布时间】：2015-04-11 15:22:48
【问题描述】：

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

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

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

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

【问题讨论】：

我宁愿看看你有什么而不是想象它。
@Daedalus 嗨，你是说 DEMO 吗？
演示会起作用，当然。
我的意思是你的 html/css。
@Daedalus 如果我能做到，那我就不需要问这个问题了

标签： css flexbox

【解决方案1】：

您无法指定使用 flexbox 包装的确切元素。但是，您可以使用 flex-basis: xx%; 和一些试用错误来使其按您想要的方式包装。

这是一个工作示例，其中有 10 个盒子，宽度为 800 像素以上，它在第七个元素之后换行，因为 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;
  }
}

记住您的供应商前缀。

【讨论】：

感谢您的帮助。我想就是这样，我最终结束了使用 JS 手动定位这些 div。但你的回答有帮助。
很高兴您找到了适合您的解决方案。如果您觉得我的建议回答了您的问题并进一步帮助了您，请通过接受答案来结束此问题。
您可以通过单击我的答案上下投票正下方的复选标记来关闭它:)