真正的左右拉伸收缩是flex分配+媒体查询切换+内容自约束三者咬合的结果：左栏用flex:0 0 240px固定，右栏用flex:1并设min-width；小屏时@media切column；图片、文本、表格等需逐层加max-width或换行控制。
左右拉伸靠 flex 的 flex 值动态分配空间
左右拉伸不是靠 JS 拖拽实现的“交互式缩放”，而是指容器宽度变化时，左右区域按比例自动伸缩。关键在 flex 的三个参数：flex-grow、flex-shrink、flex-basis。比如左栏写成 flex: 0 1 240px，右栏写成 flex: 1 1 auto，就能保证左栏最小 240px、不主动放大，右栏吃掉所有剩余空间并随窗口变窄而收缩。
常见错误是只写 width: 240px —— 这会让左栏在小屏下撑破布局或触发横向滚动；也有人误用 flex: 1 给两边，结果左右均分，失去主次感。
-
flex: 0 0 240px最稳：不伸缩、不收缩、固定基准宽（推荐用于导航栏、侧边栏） -
flex: 1适合内容区，但需配合min-width防过度压缩（如min-width: 320px） - 父容器必须是
display: flex，且子元素不能设flex-shrink: 0同时又没给max-width，否则右栏会溢出
resize: horizontal 不是响应式，只是手动拖拽控制
很多人混淆“用户可拖拽调整左右宽度”和“响应式左右拉伸”。resize: horizontal 只作用于 textarea 或带 overflow: auto 的块级元素，它本身不改变布局流，也不能响应屏幕尺寸变化。想用它做左右分栏，必须配合绝对定位、position: absolute 和手动计算宽度，属于交互增强，不是响应式方案。
实际踩坑点：
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 直接给
div加resize: horizontal无效 —— 必须同时设overflow: auto（哪怕内容不溢出） - 拖拽条默认只出现在右下角，视觉反馈弱；需用
::-webkit-resizer或覆盖滚动条样式来加粗/延长拖拽区域 - 该属性在 Firefox 中支持
resize: both和resize: horizontal，但 Safari 对resize的兼容性更差，且无法通过 JS 监听拖拽结束事件
响应式收缩要靠媒体查询 + flex-direction: column
当屏幕窄到内容无法并排时，“左右拉伸”机制就失效了，必须切换为垂直堆叠。这不是 flex 自动发生的，得靠 @media 主动干预。典型写法是：@media (max-width: 768px) { .container { flex-direction: column; } }。注意断点值不能硬套 768px —— 如果左栏含 280px 宽卡片+1rem 间距，那真正临界点可能是 max-width: calc(280px + 1rem)，否则小屏下卡片会被强行压缩变形。
容易被忽略的细节：
- 切换为
column后，原左右栏的width或flex-basis会失效，此时应重设width: 100%或align-self: stretch - 如果左栏有固定高度（如广告位），
column下可能留白过多，建议用min-height: 0配合overflow: hidden控制 - 移动端键盘弹出时视口高度骤减，
flex-direction: column可能导致内容被遮挡 —— 此时需监听resize事件或用env(safe-area-inset-bottom)调整 padding
左右区域内容自身也要防撑开
即使外层 flex 设置正确，内部图片、表格、长单词仍会破坏左右拉伸效果。比如右栏放一张 width: 500px 的图，在 400px 宽屏幕上必然溢出，把整个布局顶歪。
必须逐层约束：
- 图片统一加
max-width: 100%; height: auto;，SVG 补preserveAspectRatio="xMidYMid meet" - 文本容器设
word-break: break-word或overflow-wrap: break-word，防英文长串不换行 - 表格用
table-layout: fixed+width: 100%，再给th, td设max-width: 0; overflow: hidden强制截断 - 避免在 flex 子项里用
position: absolute脱离文档流 —— 它会让父 flex 容器无法感知其真实尺寸，导致拉伸错乱
真正的左右拉伸收缩，是 flex 分配 + 媒体查询切换 + 内容自约束三者咬合的结果。少一环，比如忘了给图片加 max-width，或者媒体查询断点设在内容实际撑开之前，都会让“响应式”变成“看起来像响应式”。
