求助：实现带侧边栏的响应式布局（含指定适配效果）

需求回顾 #

初始布局 #

• 顶部栏包含若干居中对齐的盒子
• 主内容区左侧为侧边栏，右侧为大盒子；下方是若干小盒子，跨满整个宽度
  初始布局效果：

响应式模式 #

• 屏幕缩小时，大盒子占满整个宽度
• 侧边栏移至底部，与小盒子共同排列，小盒子支持自动换行
  响应式布局效果：

问题代码分析 #

你当前的代码存在以下问题：

1. 顶部栏使用flex-direction: column，无法实现横向居中排列的盒子
2. .bottom-row未设置display: grid，导致网格列配置无效
3. 小盒子固定宽度300px，无法适配响应式换行需求
4. 缺少响应式媒体查询逻辑，无法实现布局切换

修正后的代码 #

HTML结构 #

<div class="container">
  <!-- 顶部栏：包含居中盒子 -->
  <div class="top-row">
    <div class="top-box">顶部盒子1</div>
    <div class="top-box">顶部盒子2</div>
    <div class="top-box">顶部盒子3</div>
  </div>
  <!-- 侧边栏 -->
  <div class="side-bar">侧边栏</div>
  <!-- 右侧主内容区：大盒子 + 小盒子容器 -->
  <div class="main-content">
    <div class="large-box">右侧大盒子</div>
    <div class="bottom-row">
      <div class="small-box">小盒子1</div>
      <div class="small-box">小盒子2</div>
      <div class="small-box">小盒子3</div>
      <div class="small-box">小盒子4</div>
    </div>
  </div>
</div>

CSS样式 #

/* 全局盒模型重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 主容器：网格布局 */
.container {
  display: grid;
  gap: 16px;
  padding: 16px;
  /* 初始布局：侧边栏1份宽度，主内容区4份宽度 */
  grid-template-columns: 1fr 4fr;
}

/* 顶部栏：横向居中排列内部盒子 */
.top-row {
  grid-column: 1 / -1; /* 跨满所有列 */
  display: flex;
  justify-content: center;
  gap: 16px;
  padding: 16px;
  background-color: green;
}

.top-row .top-box {
  width: 120px;
  height: 60px;
  background-color: #fff;
}

/* 侧边栏样式 */
.side-bar {
  background-color: yellow;
  padding: 16px;
}

/* 右侧主内容区：垂直排列大盒子和小盒子容器 */
.main-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* 大盒子样式 */
.large-box {
  background-color: green;
  padding: 16px;
  flex: 1; /* 占满剩余高度 */
}

/* 小盒子容器：网格布局，初始3列 */
.bottom-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.bottom-row .small-box {
  height: 100px;
  background-color: red;
}

/* 响应式断点：屏幕宽度≤768px时触发 */
@media (max-width: 768px) {
  .container {
    grid-template-columns: 1fr; /* 切换为单列布局 */
  }

  /* 调整侧边栏顺序，移至主内容区下方 */
  .side-bar {
    order: 2;
  }

  .main-content {
    order: 1;
  }

  /* 小盒子容器切换为flex布局，支持自动换行 */
  .bottom-row {
    display: flex;
    flex-wrap: wrap;
  }

  /* 侧边栏和小盒子统一设置自适应宽度 */
  .side-bar, .bottom-row .small-box {
    flex: 1 1 180px; /* 最小宽度180px，自动填充剩余空间 */
    height: auto;
    padding: 16px;
  }
}

关键修改说明 #

1. 顶部栏使用flex横向布局+justify-content: center实现内部盒子居中
2. 主容器采用网格布局，区分侧边栏和主内容区的宽度比例
3. 响应式模式下切换为单列布局，通过order属性调整侧边栏位置
4. 小盒子容器在响应式时改为flex-wrap: wrap，配合flex属性实现自适应换行

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