Flexbox布局任务求助：600px以下响应式布局调整

别发愁啦，我来帮你实现这个布局效果！先明确核心需求：

• 容器固定600px×500px，页面居中显示
• 桌面端（屏幕>600px）：红色方块居左，两个蓝色方块在右侧上下排列
• 移动端（屏幕≤600px）：两个蓝色方块移到红色方块下方，文本保持一致

实现思路拆解 #

1. 容器基础配置：给容器开启Flex布局，默认横向排列子元素，同时允许子元素换行；用margin: 0 auto实现容器居中。
2. 结构分层：把红色方块和两个蓝色方块分成两个模块——红色方块单独作为一个Flex子项，两个蓝色方块放在一个容器里作为另一个Flex子项，这样方便移动端切换排列方向。
3. 响应式适配：通过媒体查询，当屏幕宽度≤600px时，把容器的Flex排列方向改为纵向，蓝色模块就自动跑到红色方块下方了。

完整代码实现 #

HTML部分

<div class="container">
  <div class="red-box">红色方块文本</div>
  <div class="blue-container">
    <div class="blue-box">蓝色方块1文本</div>
    <div class="blue-box">蓝色方块2文本</div>
  </div>
</div>

CSS部分

/* 基础容器样式 */
.container {
  display: flex;
  flex-direction: row; /* 桌面端横向排列 */
  width: 600px;
  height: 500px;
  margin: 0 auto; /* 容器居中 */
  border: 1px solid #ddd; /* 可选：加边框方便查看容器范围 */
}

/* 红色方块样式 */
.red-box {
  flex: 1; /* 平分容器宽度，和蓝色容器各占一半 */
  background-color: #ff4444;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 18px;
}

/* 蓝色方块容器样式 */
.blue-container {
  flex: 1; /* 和红色方块平分宽度 */
  display: flex;
  flex-direction: column; /* 内部蓝色方块纵向排列 */
}

/* 蓝色方块样式 */
.blue-box {
  flex: 1; /* 两个蓝色方块平分蓝色容器的高度 */
  background-color: #33b5e5;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 18px;
  border: 1px solid white; /* 可选：加白色边框区分两个蓝色方块 */
}

/* 移动端响应式适配 */
@media (max-width: 600px) {
  .container {
    flex-direction: column; /* 切换为纵向排列 */
    width: 100%; /* 可选：让容器占满移动端屏幕宽度，也可以保持600px，根据需求调整 */
  }
}

效果说明 #

• 桌面端：红色方块和蓝色容器各占容器一半宽度，两个蓝色方块在右侧上下平分高度；
• 移动端：红色方块占满容器宽度，蓝色容器移到下方，同样占满宽度，两个蓝色方块上下排列。

你可以根据需求调整颜色、文本内容或者尺寸比例，这个结构完全能匹配你要的预期效果～

内容的提问来源于stack exchange，提问作者Георги Драганов