基于CSS Flexbox实现主内容列与右侧侧边栏布局

核心需求拆解 #

你需要实现两个核心目标：

• 主内容div垂直堆叠排列，右侧固定侧边栏的Reddit式布局
• 全站元素统一背景色

一、用Flexbox实现布局对齐 #

要实现主内容堆叠+右侧侧边栏的布局，需调整Flex容器的结构与属性：

1. 外层容器设置：外层.container使用默认的flex-direction: row，让主内容区与侧边栏横向排列
2. 主内容区嵌套Flex：将info和contact放入.main-content容器，设置该容器为flex-direction: column，实现两个主内容div垂直堆叠
3. 宽度分配：给.main-content设置75%宽度，侧边栏.gallery设置20%宽度，用gap控制元素间距
4. 对齐优化：给侧边栏添加align-self: flex-start，让其与主内容区顶部对齐，避免被拉长

二、实现统一背景色 #

无需给每个子元素重复设置背景色，只需给最外层body设置统一背景色，子元素默认继承即可：

• 给body设置目标背景色（如你使用的#0f3047）
• 移除所有子元素（如.info p、.ips等）的重复背景色设置，仅保留需要特殊背景的标题类span元素

修改后的完整代码 #

HTML #

<div class="container">
  <!-- 主内容堆叠区 -->
  <div class="main-content">
    <div class="info">
      <p><span class="about">ABOUT US</span>xxx<br> xxx <br>
        <br>xxx<span class="ips">xxx <span class="or"> or</span> xxx </span>
      </p>
    </div>
    <div class="contact"> <span class="CONTACT">CONTACT</span> </div>
  </div>
  <!-- 右侧侧边栏 -->
  <div class="gallery">
    <p><span class="text">GALLERY</span></p>
    <!-- <img src="favicon.png"> -->
  </div>
</div>

CSS #

/* 统一全站背景色 */
body {
  margin: 0;
  padding: 20px;
  background-color: #0f3047;
}

/* 外层Flex容器：主内容+侧边栏横向排列 */
.container {
  display: flex;
  justify-content: center;
  gap: 20px; /* 替代margin，更便捷的间距控制 */
}

/* 主内容区：垂直堆叠 */
.main-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 75%;
}

/* 所有子容器统一样式 */
.main-content div, .gallery {
  border: 3px #c63a32 solid;
  color: azure;
  padding: 10px;
  border-radius: 15px;
}

.info p {
  font-size: 35px; /* 补充缺失的px单位 */
}

.info span.ips {
  font-size: 35px;
  color: yellow;
}

.info span.about {
  font-size: 35px;
  color: rgb(192, 192, 238);
  background-color: #c63a32;
}

span.or {
  color: azure;
}

.gallery {
  width: 20%;
  align-self: flex-start; /* 侧边栏顶部对齐主内容 */
}

.gallery span.text {
  font-size: 35px;
  color: rgb(192, 192, 238);
  background-color: #c63a32;
}

.contact span.CONTACT {
  font-size: 35px;
  color: rgb(192, 192, 238);
  background-color: #c63a32;
}

关键优化点说明 #

• 用gap替代margin控制间距，避免margin叠加问题，更符合Flex布局规范
• 补充了font-size缺失的px单位，修复原始代码的样式失效问题
• 通过嵌套Flex容器实现主内容堆叠，布局结构更清晰，便于后续扩展
• 统一背景色通过body设置，减少重复代码，提升维护效率

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