如何避免Flex布局下Section元素的尺寸与位置发生变化？

核心思路 #

用Flex布局实现的关键是固定父容器尺寸+锁定section的缩放属性，具体代码如下：

示例代码 #

假设你的HTML结构是：

<div class="section-container">
  <section>第一段内容</section>
  <section>第二段内容</section>
  <section>第三段内容</section>
</div>

对应的CSS设置：

/* 父容器：固定整体尺寸，开启Flex布局 */
.section-container {
  display: flex;
  /* 固定容器的宽高，根据你的需求调整数值 */
  width: 1100px;
  height: 550px;
  /* 可选：设置容器在页面的固定位置，比如距离顶部/左侧各20px */
  /* position: fixed; */
  /* top: 20px; */
  /* left: 20px; */
  /* 可选：设置section之间的间距 */
  gap: 15px;
}

/* 每个section：固定自身尺寸，禁止Flex缩放 */
.section-container section {
  /* 固定每个section的宽高 */
  width: 350px;
  height: 520px;
  /* 禁止自动放大/缩小，强制保持设置的尺寸 */
  flex-grow: 0;
  flex-shrink: 0;
  /* 关键：让padding/border不额外占用空间，保证尺寸准确 */
  box-sizing: border-box;
  /* 可选：内容过多时显示滚动条，避免撑大section */
  overflow-y: auto;
  /* 可选：加个边框方便看效果 */
  border: 1px solid #ccc;
}

关键注意事项 #

• 父容器必须设置固定尺寸（或用vw/vh这类视口单位），否则会被section的内容撑开，导致整体位置变化。
• box-sizing: border-box一定要加，不然你设置的width/height会被padding和border额外放大，导致尺寸不准。
• 如果不需要横向排列，给父容器加上flex-direction: column，就能改成垂直固定排列。

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