1. 在 Flexbox 下保持子元素固定宽高比的核心思路
固定宽高比的定义与目标
在前端布局中，固定宽高比指的是一个元素的宽度和高度满足某个比值，如 16:9 或 4:3。使用 Flexbox 的布局容器时，子元素往往需要在不同屏幕宽度下保持这个比值，以避免图片或卡片变形。这也是实现“百分比技巧”的场景之一，确保布局在多设备下的一致性。
常用思路是让子元素以一个“比例盒”存在，内部装载实际内容，并通过 CSS 控制盒子的宽高比。这使得网格在横向和纵向扩展时都能保持外观稳定，提升用户体验和视觉稳定性。
在实际项目中，通过合理的 Flexbox 子项分配和固定比例的实现，可以让复杂的卡片网格在移动端和桌面端都保持漂亮的比例。这是本文要讲解的百分比技巧的重要组成部分。
Flexbox 的分配与约束
在 Flexbox 中，子元素的宽高受 flex 属性、容器尺寸和换行策略影响。通过设置合适的 flex-basis 与 min-width，可以让每个子项在达到最小宽度后保持固定比例，不被拉伸成无限大。
另外，overflow 与 object-fit 也有助于图片等内容的裁切与适应，确保内容在比值盒中正确显示。请记住，比例的实现优先考虑跨浏览器兼容性。
2. 利用 padding-top/percent 实现固定宽高比
Padding 百分比的原理
CSS 中的 padding-top、padding-bottom 采用百分比时，是基于父元素的宽度来计算的。这意味着通过一个空的高度占位盒，可以以宽度为基准动态产生固定的高度，进而实现固定宽高比。这种方法属于本文的核心“百分比技巧”之一。
最常用的方法是在一个容器内创建一个比例盒，随后在其上放置绝对定位的内容容器。这样子元素就能在不同屏幕下保持稳定的纵横比，并且对响应式布局友好。
实现步骤与要点
步骤通常包括：创建一个比例盒容器，将其高度设为 0，添加一个纵向的 padding（如 padding-top: 56.25% 对应 16:9），再在内部放置绝对定位的内容容器。注意父容器的宽度需要自适应，以实现真正的响应式效果。
为了解决文本和图片的对齐问题，可以在内部内容容器中使用 display: flex; align-items: center; justify-content: center，确保内容居中展示。
/* 容器，保持 16:9 的比例 */
.ratio {position: relative;width: 100%;height: 0;padding-top: 56.25%; /* 16:9 */overflow: hidden;
}
.ratio > .inner {position: absolute;top: 0; left: 0; right: 0; bottom: 0;display: flex;align-items: center;justify-content: center;
}
3. 结合 Flexbox 的自适应响应式布局技巧
弹性盒子与自适应宽度
利用 flex-wrap 与 flex-basis，可以让子元素在容器宽度变化时自动重新排布，保持比例盒的宽高关系。
在网格中，设置 min-width 能确保每行至少容纳一个比例盒，避免子元素被拉成长条。配合媒体查询，可以在不同分辨率下调整比例和间距。
具体实现要点
一个常见做法是让每个条目具有固定的最小宽度，例如 240px，同时允许它们在更宽的视口中扩展。同时内部比例盒采用相同的 16:9 或自定义比值，保证盒子的一致性。
下面的代码演示了一个简单的网格：
.grid {display: flex;flex-wrap: wrap;gap: 16px;
}
.card {flex: 1 0 240px; /* 最小宽度 240px，按需拉伸 */
}
.card .ratio {position: relative;width: 100%;height: 0;padding-top: 56.25%; /* 16:9 */
}
.card .ratio > img {position: absolute;width: 100%; height: 100%; top: 0; left: 0;object-fit: cover;
}
4. 可移植的 CSS 代码模板
通用变量与混合模式
为了让技巧具备可移植性，可以把比例和容器设为可复用的类或 CSS 变量。使用自定义属性可以让不同组件共享同一份实现逻辑，减少重复代码。
下面给出一个最简模板，方便直接在项目中复用。关注点是比例、容器结构和内容对齐。
:root {--ratio: 56.25%; /* 16:9 */
}
.aspect {position: relative;width: 100%;height: 0;padding-top: var(--ratio);
}
.aspect > .content {position: absolute;inset: 0;display: flex;align-items: center;justify-content: center;
}
@media (min-width: 768px) {:root { --ratio: 50%; } /* 2:1 框架在大屏也能保持稳定 */
}
5. 实际示例：图片网格或卡片网格
HTML 结构示例
下面的结构展示了如何在一个网格中保持每个卡片的固定宽高比，同时自适应不同设备宽度。图片将通过 object-fit: cover 保持裁剪效果，文本区域跟随比例盒浮动。
请将下列代码嵌入到页面中，并在需要的地方应用相应的样式。确保父容器具备宽度自适应能力，以实现响应式变化。
卡片标题卡片标题卡片标题
.grid {display: flex;flex-wrap: wrap;gap: 16px;
}
.card {flex: 1 0 240px;background: #fff;border: 1px solid #eaeaea;border-radius: 6px;overflow: hidden;
}
.card .ratio {position: relative;width: 100%; height: 0;padding-top: 56.25%; /* 16:9 */
}
.card .ratio > img {position: absolute; inset: 0;width: 100%; height: 100%; object-fit: cover;
}
.card .caption {padding: 12px;font-size: 14px;
}
