如何让flex容器内所有flexbox元素随视口等比例缩放

我希望flex容器内的所有flex盒子能够实现等比例缩放效果。

当缩小视口时，中间的flexbox会自动调整尺寸，但两侧的flexbox不会同步缩放，最终出现中间内容尺寸极小、两侧元素尺寸过大的显示异常。我是CSS初学者，对相关属性用法不够熟悉，恳请各位提供帮助指导。

效果对比参考 #

• 视口缩小前效果：
  
• 视口缩小后效果：
  

预期效果：两侧的元素可以和中间的元素同步等比例缩小。

原有实现代码 #

CSS代码 #

.flexbox-container {
  display: flex;
  justify-content: center;
  background-color: #808080;
}

.flexbox-inner {
  width: 1280px;
  height: 720px;
  margin: 0px 32px;
  border: 3px solid #000000;
  background-color: #808080;
}

.flexbox-outer {
  width: 192px;
  height: 1148px;
  border: 3px solid #000000;
  background-color: #808080;
}

.flexbox-outer-inner {
  width: 160px;
  height: 558px;
  margin: auto;
  border: 3px solid #ffffff;
}

.flexbox-outer-inner-bottom {
  margin-top: 26px;
}

HTML代码 #

<div class="flexbox-container">
  <div class="flexbox-outer">
    <div class="flexbox-outer-inner"></div>
    <div class="flexbox-outer-inner flexbox-outer-inner-bottom"></div>
  </div>
  <div class="flexbox-inner"></div>
  <div class="flexbox-outer">
    <div class="flexbox-outer-inner"></div>
    <div class="flexbox-outer-inner flexbox-outer-inner-bottom"></div>
  </div>
</div>

问题原因 #

原有代码给所有flex子项设置了固定像素宽高，flex布局默认的收缩规则不会按照元素初始宽度的比例等比收缩，且固定像素高度不会随宽度变化自动调整，才会出现两侧元素不缩放、中间被过度压缩的问题。

修复方法 #

1. 给flex子项设置对应比例的flex属性，让元素严格按照设计稿初始宽度的比例分配收缩/扩张空间，替换硬编码的固定宽度
2. 用aspect-ratio属性替换固定像素高度，让元素宽度变化时高度自动按原始宽高比同步缩放
3. 内部子元素的尺寸、边距、容器间距改用相对比例设置，避免固定像素值破坏整体缩放效果
4. 给flex容器加align-items: flex-start，取消默认的拉伸对齐，避免两侧元素高度被强行拉到和中间元素一致
5. 给flex子项添加min-width: 0，覆盖flex项默认的最小宽度限制，保证小视口下元素可以正常收缩

修复后完整代码 #

.flexbox-container {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 1.9%;
  background-color: #808080;
  width: 100%;
  padding: 0 1rem;
  box-sizing: border-box;
}

.flexbox-inner {
  flex: 1280 1 0;
  aspect-ratio: 1280 / 720;
  border: 3px solid #000000;
  background-color: #808080;
  min-width: 0;
}

.flexbox-outer {
  flex: 192 1 0;
  aspect-ratio: 192 / 1148;
  border: 3px solid #000000;
  background-color: #808080;
  padding: 1.4% 0;
  box-sizing: border-box;
  min-width: 0;
}

.flexbox-outer-inner {
  width: 83.33%;
  aspect-ratio: 160 / 558;
  margin: 0 auto;
  border: 3px solid #ffffff;
}

.flexbox-outer-inner-bottom {
  margin-top: 4.6%;
}

HTML部分不需要修改，替换CSS后即可实现所有元素随视口同步等比例缩放的效果。

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