新增大尺寸div行时，如何将小div列移至右侧及下方？

嘿，我来帮你搞定这个布局问题！你说得对，核心确实是Flex布局的使用逻辑，Pug只是结构写法，重点在CSS的Flex属性设置上。咱们一步步来实现你要的效果：

要实现「新增橙色大div时，绿色和栗色div自动右移、下移」，关键是利用Flex布局的换行特性，让大尺寸的橙色div优先占据空间，把其他元素挤到剩余区域（空间不够就自动换行）。

第一步：写Pug结构 #

咱们先搭好基础结构，动态添加橙色div的逻辑（比如JS循环/点击添加）你可以自己加，这里先写静态示例：

// 主容器，所有元素都放在这里
.flex-container
  // 动态添加的橙色大div，这里可以用JS动态插入多个
  .big-orange-box 橙色大div
  // 绿色div
  .green-box 绿色div
  // 多个栗色小div
  .maroon-box 栗色div 1
  .maroon-box 栗色div 2
  .maroon-box 栗色div 3

第二步：核心CSS样式 #

这部分是重点，我会逐行解释关键属性：

.flex-container {
  display: flex; /* 把容器设为Flex容器 */
  flex-wrap: wrap; /* 最关键！元素总宽度超容器时自动换行 */
  gap: 12px; /* 元素之间的间距，可选，让布局更美观 */
  padding: 15px;
}

.big-orange-box {
  /* 固定占满整行：不放大、不缩小、基础宽度100% */
  flex: 0 0 100%;
  height: 110px;
  background-color: #ff9800;
}

/* 如果想要橙色div不是占满整行，而是大尺寸（比如80%宽度），可以改成下面这行：
flex: 0 0 80%;
这样新增后绿色div会挤到橙色右侧，空间不够才换行 */

.green-box {
  /* 固定宽度220px，不放大不缩小 */
  flex: 0 0 220px;
  height: 90px;
  background-color: #4caf50;
}

.maroon-box {
  /* 固定宽度160px的小div */
  flex: 0 0 160px;
  height: 70px;
  background-color: #795548;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

效果说明 #

• 没有橙色div时：绿色和栗色div会从左到右排列，容器宽度不够时自动换行
• 新增橙色div（占满整行）：橙色div会单独占一行，绿色和所有栗色div自动移到下一行，继续从左到右排版
• 如果把橙色div设为80%宽度：新增后绿色div会挤到橙色右侧（容器宽度足够的话），栗色div会在绿色下方/右侧自动排列

关键知识点 #

• flex-wrap: wrap是实现换行的核心，没有它的话，所有元素会强行挤在一行，不会下移
• flex: 0 0 [宽度]这个写法是固定元素宽度：第一个0是不允许放大，第二个0是不允许缩小，第三个值是元素的基础宽度
• 如果需要动态添加多个橙色大div，每个橙色div都用flex:0 0 100%，它们会依次占据每行，绿色和栗色div会一直被挤到最后

这样就能完美实现你要的布局变化啦！

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