Flex布局中父容器首个子元素如何将其余兄弟元素挤到下一行

结论 #

可以实现，无需修改现有DOM结构，仅需新增3行CSS代码即可达到效果。

实现原理 #

利用flex布局的换行特性 + 百分比外边距占满剩余行空间的逻辑实现。

代码示例 #

基础样式配置 #

/* 父容器新增2行配置 */
.items-container {
  display: flex;
  flex-wrap: wrap; /* 必须开启换行，否则子元素会被强制压缩在同一行 */
}

/* 第一个子元素新增1行配置 */
.item1 {
  margin-right: 100%;
}

两种常见场景适配 #

• 场景1：仅需后续元素换行，第一个子元素保留自身内容宽度：使用上述默认配置即可。
• 场景2：需要第一个子元素占满整行宽度，后续元素换行：将.item1的配置替换为flex-basis: 100%即可。

效果说明 #

配置完成后，item1会在第一行渲染，item2、item3等所有后续兄弟元素都会自动排列到第二行，后续元素的flex布局特性不受影响，可以继续在第二行按flex规则排列。该方案兼容所有支持flex布局的浏览器（包括IE11），无额外兼容性问题。

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