Flex子元素不响应父容器resize事件，因CSS无原生监听机制；浏览器resize事件仅作用于可缩放替换元素，普通flex容器无效；应使用ResizeObserver监听或通过flex布局特性自然响应。
flex子元素本身不响应父容器的resize事件——CSS没有提供原生机制让子项监听父级尺寸变化，必须靠JavaScript主动观测或用布局策略规避依赖。
为什么直接监听父容器resize无效
浏览器原生的 resize 事件只触发在具有 overflow 非 visible 且可用户调整大小的元素上（如 textarea 或设置了 resize: both 的 div），而普通 flex 容器默认 overflow: visible，即使加了 resize: horizontal 也完全不会触发事件。
- Flex 容器不是“可缩放替换元素”，
resize属性对其无意义 - 子元素更不可能自动感知父容器宽高变化；CSS 是声明式、无运行时反馈的
- 试图给父容器加
onresize属性或监听window.onresize会漏掉非窗口驱动的 resize（比如 JS 动态改style.width）
可靠方案：用 ResizeObserver 监听父容器尺寸
这是目前唯一标准、轻量、兼容性足够（Chrome 64+、Firefox 69+、Safari 13.1+）的方案。它能精确捕获任意 DOM 元素的盒模型变化，包括 flex 容器的 contentBoxSize 或 borderBoxSize。
- 必须监听直接包裹子元素的那个父容器，不能监听外层 wrapper
- 回调中应避免高频重排：用
requestAnimationFrame节流，或仅更新影响 layout 的样式（如flex-basis） - 注意清除 observer：组件卸载或容器销毁时调用
unobserve()，否则内存泄漏
const container = document.querySelector('.flex-container');
const observer = new ResizeObserver(entries => {
const { inlineSize, blockSize } = entries[0].contentBoxSize[0];
// 例如：根据宽度动态设子项最小宽度
document.querySelectorAll('.flex-item').forEach(el => {
el.style.flexBasis = inlineSize > 768 ? '300px' : '100%';
});
});
observer.observe(container);
不写 JS 的替代思路：用 CSS 布局特性“绕过” resize 依赖
很多所谓“响应父级 resize”的需求，本质是希望子元素随容器空间自动伸缩——这本就是 flex 的天然能力，无需监听。
立即学习“前端免费学习笔记（深入）”；
- 去掉所有固定宽高，让子元素用
flex: 1或flex: 0 1 auto，它们会自然响应容器尺寸变化 - 避免用
width: 200px+flex-shrink: 0组合，这会让子项在窄屏下溢出而非收缩 - 若需“断点式”行为（如小屏单列、大屏三列），优先用媒体查询控制
flex-direction和flex-basis，而非 JS 判断 - 对高度敏感的场景（如全屏卡片），确保父容器有明确高度约束：
height: 100vh或min-height: 100%，否则flex: 1在纵向上无效
移动端特别注意：resize 不可用，别白费力气
iOS Safari 和 Android Chrome 全面禁用 resize 事件，连 ResizeObserver 在某些旧版 WebView 中也有兼容问题。这时候硬上 JS 监听反而增加崩溃风险。
- 放弃“拖拽调整分隔线”类交互——移动端只能靠 media query 或 viewport 变化间接响应
- 如果必须支持手指拖动（如分屏对比），得用
touchstart/touchmove手动计算位移，再更新flex-basis，并加touch-action: none防止误触发页面滚动 - 所有基于尺寸的逻辑，务必加 fallback：比如用
@supports (display: flex)包裹 flex 样式，并为不支持者提供float或grid备选
真正容易被忽略的不是“怎么监听”，而是误以为 flex 子元素需要监听——绝大多数时候，你只要写对 flex 属性、设好父容器约束、避开 height: 100% 这类陷阱，它们就已经在静默响应了。
