如何设置Flexbox元素间固定40px间距，避免随屏幕变宽增大？

你的问题出在.browsers-container未限制最大宽度：当屏幕宽度远大于三个盒子的总宽度时，容器会占满整个屏幕，justify-content: center让盒子居中，两侧产生空白，导致你误以为盒子间的间距变大——实际上column-gap:40px是固定的，只是容器两侧留白增加了。要实现固定间距且阻止这种行为，只需给容器添加最大宽度限制，同时确保盒子尺寸稳定。

修改后的CSS代码 #

.browser-box {
  width: 270px; /* 把max-width改为width，确保盒子宽度固定 */
  margin: 0 auto 40px;
  box-shadow: rgba(149, 157, 165, 0.2) 2px 8px 12px,
              rgba(149, 157, 165, 0.2) -2px 0 6px;
  border-radius: 8px;
}

.browser-box h3 {
  margin-bottom: 10px;
  font-size: 20px;
  font-weight: 500;
}

.browser-box p {
  margin-bottom: 35px;
  font-size: 15px;
}

.btn-browser {
  width: 75%;
  margin-bottom: 25px;
  margin-right: 0;
}

.browsers-container {
  display: flex;
  justify-content: center;
  column-gap: 40px;
  margin-inline: auto;
  max-width: 890px; /* 三个盒子宽度(270*3) + 两个间距(40*2) = 890px */
  flex-wrap: wrap; /* 可选：小屏幕自动换行，保持间距 */
}

.browser-box:nth-of-type(2) {
  transform: translateY(40px);
}

.browser-box:nth-of-type(3) {
  transform: translateY(80px);
}

关键修改点说明 #

• 固定盒子宽度：将browser-box的max-width改为width:270px，确保每个盒子宽度稳定，不会随内容或屏幕变化。
• 限制容器最大宽度：给.browsers-container设置max-width:890px，这个值是三个盒子的总宽度加上两侧间距的总和，容器宽度不会超过这个值，大屏幕下只会在容器两侧留白，而盒子间的间距始终保持40px。
• 可选：小屏幕换行：添加flex-wrap:wrap，当屏幕宽度不足890px时，盒子会自动换行，若需要垂直间距可额外添加row-gap:40px。

这样修改后，无论屏幕宽度如何变化，盒子之间的间距都会固定为40px，不会随屏幕变大而“被拉大”。

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