如何在使用flexbox的section中搭配限制max-width的wrapper div

首先你不需要修改现有HTML结构，分层设置样式即可同时满足flex布局和全宽背景的需求，这也是目前前端项目通用的最佳实践：

核心思路 #

拆分两个元素的职责：

• section 负责区域级样式：全宽背景、区块高度、控制内部wrapper的对齐规则
• wrapper 仅负责内容宽度限制、内部内容的布局控制

代码示例 #

HTML（和你现有结构完全一致，无需改动） #

<section class="hero flex">
  <div class="wrapper">
    <h1>Content 1</h1>
    <p>Content 2</p>
    <button>Content 3</button>
  </div>
</section>

CSS #

/* 通用wrapper类，全站所有需要限制最大宽度的内容都可以复用 */
.wrapper {
  width: 100%;
  max-width: 1200px; /* 按需调整你的最大内容宽度 */
  margin-inline: auto; /* 实现水平居中，兼容性优秀 */
  padding-inline: 1rem; /* 小屏幕下左右预留边距，避免内容贴边 */
}

/* hero区域样式 */
.hero.flex {
  display: flex;
  min-height: 80vh; /* 按需调整区块高度 */
  align-items: center; /* 垂直居中内部的wrapper */
  background-color: #eff6ff; /* 背景色写在section上，默认全宽显示，不受wrapper宽度限制 */
}

/* 如需控制wrapper内部内容的flex布局，单独给wrapper加flex属性即可 */
.hero .wrapper {
  display: flex;
  flex-direction: column;
  gap: 1rem; /* 控制内容之间的间距 */
  align-items: flex-start; /* 内容左对齐，需要居中改为center即可 */
}

问题对应解决说明 #

1. 内容不受flex规则作用的问题：外层section的flex控制wrapper的对齐，wrapper自身的flex控制内部内容的布局，分层逻辑清晰，不会出现规则冲突。
2. 背景被max-width限制的问题：背景样式全部绑定在section元素上，section默认宽度100%撑满视口，完全不受内部wrapper的宽度限制，不会出现背景截断的问题。

这种结构复用性极强，后续所有需要限制内容宽度的区块都可以直接套用，不会出现额外的布局问题。如果不需要复杂的flex对齐，也可以把section的布局改为grid，display: grid; place-items: center; 一行代码即可实现wrapper的水平垂直居中，代码更简洁。

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