如何在Flexbox行中设置首选换行点（放不下时在第8项后换行）？

要实现"一行放不下所有项目时在第8项后换行"的需求，最稳妥且兼容性好的方法是通过元素分组+Flexbox换行特性实现，具体方案如下：

核心方案：分组包裹元素 #

将前8个项目和后2个项目分别用容器包裹，通过外层Flex容器的flex-wrap: wrap实现自适应换行：

HTML结构 #

<div class="flex-container">
  <div class="flex-group">
    <div class="item">项目1</div>
    <div class="item">项目2</div>
    <div class="item">项目3</div>
    <div class="item">项目4</div>
    <div class="item">项目5</div>
    <div class="item">项目6</div>
    <div class="item">项目7</div>
    <div class="item">项目8</div>
  </div>
  <div class="flex-group">
    <div class="item">项目9</div>
    <div class="item">项目10</div>
  </div>
</div>

CSS样式 #

.flex-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px; /* 可选：设置分组/项目间距 */
}

.flex-group {
  display: flex;
  flex: 1 0 auto; /* 分组优先占满可用空间，空间不足时自动换行 */
  gap: 8px;
}

.item {
  flex: 0 0 auto; /* 保持项目固定宽度，可根据需求改为flex:1实现自适应 */
  padding: 4px 8px;
  border: 1px solid #ddd;
}

效果说明 #

• 当容器宽度足够放下所有10个项目时，两个分组会在同一行显示，所有项目保持在一行。
• 当容器宽度不足时，第二个分组会自动换行到下一行，实现"第8项后换行"的效果。
• 分组内部的Flex布局保证组内项目始终在一行排列。

无HTML结构修改的备选方案（兼容性有限） #

如果无法调整HTML结构，可尝试使用CSS的break-after属性，但该方法会强制第8项后换行，无论空间是否足够，仅适合需强制换行的场景：

.item:nth-child(8) {
  break-after: always;
}

该属性在现代浏览器中支持较好，但无法实现"仅空间不足时换行"的自适应需求，因此优先推荐分组方案。

内容的提问来源于stack exchange，提问作者1.21 gigawatts