结论：HTML本身没有可伸缩布局管理器，所谓可伸缩布局本质是CSS的display:flex或display:grid配合flex-grow、minmax()等响应式属性实现，HTML仅提供语义结构，不控制尺寸、比例或伸缩行为。
直接说结论：HTML 本身没有“可伸缩布局管理器”这个东西，所谓“可伸缩布局”，本质是用 CSS 的 display: flex 或 display: grid 配合响应式属性（如 flex-grow、minmax()）实现的，不是靠 HTML 标签或 JS 库自动管理。
为什么不能只靠 HTML 标签实现可伸缩布局
HTML 是结构层，它只定义语义（比如 <header>、<nav>、<section>），不控制尺寸、比例或伸缩行为。你写再多 <div> 或自定义标签（如 <layout-container>），只要没配 CSS 的弹性规则，它就只是静态盒子——不会随容器变宽而拉伸，也不会按内容多少自动重排。
常见错误现象：<div class="flex-row"></div> 没写 CSS，或只写了 class="flex-row" 却没在样式表里定义 .flex-row { display: flex; }，结果页面完全无反应。
- HTML 标签无法声明“这个区域占 1/3，那个留空自适应”这类约束
- 浏览器解析 HTML 时，不执行任何布局计算；所有伸缩逻辑由 CSS 引擎（如 Blink、WebKit）在渲染阶段处理
- 所谓“管理器”，其实是开发者用 CSS 规则 + 媒体查询 + 少量 JS（仅用于动态开关类名）协同完成的
display: flex 是最常用且可控的起点
它适合一维伸缩场景（行或列），语义清晰、兼容性好（IE11+ 支持主流语法），且不需要 JS 干预就能响应容器尺寸变化。
立即学习“前端免费学习笔记（深入）”；
关键实操点：
- 必须给父容器设
display: flex（或inline-flex），子元素才成为flex item - 用
flex-direction: column切换主轴方向，此时justify-content控制垂直对齐，align-items控制水平对齐 - 等高靠
align-items: stretch（默认值），但前提是父容器有明确高度（如min-height: 300px或height: 100vh），否则“等高”无参照 - 避免滥用
flex: 1：它等价于flex-grow: 1; flex-shrink: 1; flex-basis: 0，若内容溢出或最小宽度不够，可能触发意外压缩
示例（三栏等宽自适应）：
.layout-row {
display: flex;
}
.layout-col {
flex: 1;
min-width: 200px; /* 防止过窄 */
}
@media (max-width: 768px) {
.layout-row {
flex-direction: column;
}
}什么时候该换用 display: grid
当你需要二维控制（比如“第一行两列，第二行跨三列，第三行固定高度”），或者要精确指定区域命名（grid-template-areas），grid 比 flex 更直接。
但它对旧版浏览器支持弱（IE 完全不支持，iOS Safari 10.3+ 才稳定），且调试复杂度更高——一个 grid-gap 写错，整块布局就错位。
-
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))))是响应式栅格核心，但auto-fit和auto-fill行为差异大，容易漏测小屏断点 - 用
grid-area定位时，必须确保容器已声明grid-template-areas，否则无效 -
grid中的fr单位是“剩余空间份数”，不是像素，和flex: 1表面相似，但计算时机与约束条件不同（例如受grid-auto-rows影响）
JS 只该做“开关”，不该做“计算”
真正可伸缩的布局，95% 逻辑应由 CSS 承担。JS 仅用于：
- 监听
resize事件后切换容器类名（如layout--compact→layout--expanded），触发预设的 CSS 规则 - 根据数据长度动态添加/移除
flex-wrap: wrap类，而非手动算每个 item 宽度 - 在 SSR 场景下，用
data-*属性传递初始配置（如data-cols="3"），再由 CSS[data-cols="3"] > *统一控制
反模式：用 JS 获取 clientWidth 后硬编码 style.width = ... —— 这会破坏 CSS 的层叠与媒体查询，且无法被浏览器优化重绘。
真正难的不是写几行 flex，而是决定哪些尺寸该弹性、哪些该固定，以及在多设备断点间如何妥协。比如一个侧边栏，是设 min-width: 240px 还是 flex-basis: 15%，取决于内容密度和用户操作习惯——这没法靠工具生成，得靠反复真机测试。
