如何让Flex容器宽度自适应内容且Flex项目分行显示？

嘿，我来帮你解决这个布局问题！你想要让Flex容器宽度自适应内容，同时把flex_item1那组和flex_item2那组分到单独的行里，咱们只需要对现有代码做一点调整就能实现啦。

核心解决思路 #

1. 保留inline-flex让容器宽度自适应内容，但得给容器加上flex-wrap: wrap开启换行功能；
2. 把每组要在同一行显示的元素用一个子容器包起来，然后让这个子容器占满容器的整行宽度，这样下一组就会自动换到新行。

修改后的完整代码 #

HTML 代码

<div class="flex_container"> 
  <!-- 第一组：Item和Label放在同一行 -->
  <div class="flex_group">
    <div class="flex_item1">Item</div> 
    <label for="" class="flex_item1">I am a Label</label> 
  </div>
  <!-- 第二组：自动换到新行 -->
  <div class="flex_group">
    <div class="flex_item2">Item 2</div> 
    <label for="" class="flex_item2">I am a Label 2</label> 
  </div>
</div>

CSS 代码

.flex_container{ 
  display: inline-flex; 
  align-items: center; 
  flex-wrap: wrap; /* 关键：开启Flex换行 */
} 
/* 让每个分组占满整行，强制下一组换行 */
.flex_group {
  flex: 1 0 100%;
  display: flex; /* 保持组内元素横向排列 */
  align-items: center;
}
.flex_item1{ background-color: red; } 
.flex_item2{ background-color: yellow; }

额外小技巧（无需新增HTML容器） #

如果你不想额外加HTML标签，也可以用CSS的换行属性强制flex_item2的第一个元素换行，不过这种方式兼容性稍弱，不如分组包裹直观：

.flex_item2:first-of-type {
  break-before: always;
}

不过还是更推荐用分组包裹的方式，结构更清晰，后续维护也更方便~

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