如何让flex布局中的中间项与左右项实现等比例缩小？

你当前.container的三个直接子flex项分别是.box1、.middle-part、.box4：

• 左右两个.box你显式设置了固定宽度400px，flex项默认flex-shrink:1，因此可以正常收缩
• 中间的.middle-part未设置宽度，默认宽度由内部的.box撑开为400px，且flex项默认min-width: auto，内容宽度会阻止容器收缩，因此无法和左右项同步等比例缩小。

修改对应CSS规则即可，以下是完整调整后的CSS代码：

.container {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 80px;
  /* 用gap替代中间项的margin，更易维护 */
  gap: 20px;
}

/* 给所有直接子flex项设置统一缩放规则 */
.container > * {
  flex: 1 1 400px; /* flex-grow:1 等比例放大，flex-shrink:1 等比例缩小，flex-basis:400px 基础宽度 */
  min-width: 0; /* 覆盖默认min-width:auto，允许容器收缩到小于内容宽度 */
}

/* 中间容器设置纵向flex布局，适配内部两个box的排列 */
.middle-part {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.box {
  /* 把固定宽度改成100%，跟随父容器宽度变化 */
  width: 100%;
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid black;
  font-size: 30px;
  font-weight: bold;
  font-family: cursive;
  box-shadow: 1px 4px 3px rgba(0, 0, 0, 0.5);
}
.box1 {
  background: grey;
}
.box2 {
  background: green;
}
.box3 {
  background: greenyellow;
}
.box4 {
  background: orange;
}

/* 移动端断点堆叠布局，可根据实际需求调整断点数值 */
@media (max-width: 768px) {
  .container {
    flex-direction: column;
    height: auto;
    padding: 80px 20px;
  }
}

调整后在桌面端缩小浏览器宽度时，三个列会按照相同比例同步缩小，到达设定的移动端断点后自动切换为纵向堆叠排列，符合需求。

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