CSS Flex布局宽高比实现方法

在 CSS Flex 弹性布局中实现宽高等比（如正方形、16:9 等比例），可以通过以下两种主流方法实现：

方法 1：利用 padding-top 百分比

原理：padding 的百分比值是基于父容器的 宽度 计算的，通过设置 padding-top 的百分比值，结合 height: 0 和绝对定位内容，实现高度与宽度的比例关系。

<div class="flex-container">
  <div class="aspect-box">
    <div class="content">内容区域</div>
  </div>
</div>

.flex-container {
  display: flex;
  gap: 10px;
}

/* 宽高比例控制 */
.aspect-box {
  flex: 1; /* 宽度由 Flex 容器分配 */
  position: relative;
  height: 0; /* 初始高度为 0，由 padding-top 撑开 */
  padding-top: 56.25%; /* 16:9 比例 (9/16=0.5625) */
  background: #eee;
}

/* 内容填充 */
.content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

关键点：

• 父容器使用 display: flex 布局。
• 子项通过 flex: 1 等属性分配宽度。
• 通过 padding-top: X% 控制高度比例，公式为：(高度 / 宽度) * 100%。

方法 2：使用 aspect-ratio 属性（现代浏览器支持）

原理：CSS 原生属性 aspect-ratio 直接定义元素的宽高比，无需复杂计算。

.flex-container {
  display: flex;
  gap: 10px;
}

.aspect-box {
  flex: 1;
  aspect-ratio: 1; /* 1:1 正方形 */
  background: #eee;
  display: flex;
  justify-content: center;
  align-items: center;
}

优点：

• 代码简洁，无需嵌套元素。
• 直接通过 aspect-ratio: 宽/高 定义比例（如 16/9）。

兼容性：

• 支持现代浏览器（Chrome 88+、Firefox 89+、Safari 15+）。
• 旧版浏览器需回退到 padding-top 方法。

不同比例计算示例

注意事项

1. 父容器宽度：子项的宽度需明确由 Flex 容器分配（如 flex: 1 或 width: 50%）。
2. 内容溢出：内容超出容器时需设置 overflow: auto。
3. 兼容性：优先使用 aspect-ratio，旧项目用 padding-top 兜底。

按需选择方法，可轻松在 Flex 弹性布局中实现固定宽高比！