如何在响应式屏幕中分组Flex项目并让橙色项始终并排

核心实现思路 #

通过嵌套Flex容器拆分布局单元，分别控制橙色项的强制并排逻辑，以及绿色/紫色项的灵活排列规则，完全适配你的桌面端和移动端需求。

1. 实现橙色项始终并排（必填需求） #

把两个橙色Flex项包裹进一个子Flex容器，通过容器属性强制它们保持并排：

/* 橙色项的父容器 */
.orange-group {
  display: flex;
  flex-wrap: nowrap; /* 强制不换行，始终并排 */
  gap: 8px; /* 可选：设置项之间的间距 */
}

在移动端媒体查询中，将这个子容器作为父Flex容器的一个独立项目，占满一行的50%宽度：

@media (max-width: 768px) {
  .parent-container {
    flex-wrap: wrap;
  }
  .orange-group {
    flex: 0 1 50%; /* 占一行的一半宽度 */
    box-sizing: border-box; /* 避免padding/border撑宽容器 */
  }
  .orange-group .orange-item {
    flex: 1; /* 两个橙色项平分组内宽度 */
  }
}

无论屏幕如何缩小，橙色项都会在子容器内保持并排，不会被拆分换行。

2. 实现绿色/紫色项的灵活两列布局（可选需求） #

同样给绿色、紫色项套一个子Flex容器，通过调整flex-direction和flex属性，实现根据容器高度自动切换排列方式：

/* 绿色紫色项的父容器 */
.green-purple-group {
  display: flex;
  flex-direction: column; /* 默认垂直排列，适配小高度场景 */
  gap: 8px;
}

/* 当容器高度足够时，自动切换为水平两列 */
@media (min-height: 400px) {
  .green-purple-group {
    flex-direction: row;
  }
  .green-item, .purple-item {
    flex: 1; /* 平分组内宽度 */
  }
}

如果需要更灵活的响应逻辑（比如根据宽度切换），可以改用flex-wrap+最小宽度的组合：

.green-purple-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.green-item, .purple-item {
  flex: 1 1 40%; /* 最小宽度40%，容器足够宽时自动并排，不足时换行 */
}

完整代码示例 #

<div class="parent-container">
  <!-- 橙色项组 -->
  <div class="orange-group">
    <div class="orange-item">橙色1</div>
    <div class="orange-item">橙色2</div>
  </div>
  <!-- 绿色紫色项组 -->
  <div class="green-purple-group">
    <div class="green-item">绿色</div>
    <div class="purple-item">紫色</div>
  </div>
  <!-- 其他项目... -->
</div>

/* 桌面端基础样式 */
.parent-container {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 16px;
}
.parent-container > * {
  flex: 1 1 auto;
}

/* 子容器通用样式 */
.orange-group, .green-purple-group {
  display: flex;
  gap: 8px;
}

/* 项目样式 */
.orange-item { background: orange; }
.green-item { background: green; }
.purple-item { background: purple; color: #fff; }
.orange-item, .green-item, .purple-item {
  padding: 16px;
  border-radius: 4px;
}

/* 移动端适配 */
@media (max-width: 768px) {
  .parent-container > * {
    flex: 0 1 50%;
    box-sizing: border-box;
  }
  .orange-group {
    flex-wrap: nowrap;
  }
  .orange-group .orange-item {
    flex: 1;
  }
  /* 默认垂直排列绿色紫色项 */
  .green-purple-group {
    flex-direction: column;
  }
  /* 高度足够时切换为水平排列 */
  @media (min-height: 400px) {
    .green-purple-group {
      flex-direction: row;
    }
    .green-item, .purple-item {
      flex: 1;
    }
  }
}

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