Flex两栏对比需设flex: 0 0 60%和flex: 0 0 40%防塌陷，等宽时用flex: 1加min-width: 0，代码块需overflow-x: auto、white-space: pre-wrap及align-items: flex-start。
Flex实现两栏对比，比例怎么设才不塌陷
用 display: flex 做分栏对比时，最常踩的坑是没处理好子元素的 flex-shrink。默认值是1，意味着内容超宽时会被强行压缩——尤其放代码块、表格或长单词时，整栏会突然变窄甚至换行。
关键不是只写 flex: 1，而是明确控制缩放行为：
- 需要固定比例（比如左60%右40%）：用
flex: 0 0 60%和flex: 0 0 40%，前两位分别关掉伸缩和收缩 - 需要等宽但内容自适应：用
flex: 1，但务必给子容器加min-width: 0，防止内部文本撑爆布局 - 放预格式化内容（如
<pre>）时，额外加white-space: pre-wrap和overflow-x: auto
响应式断点下，左右栏该堆叠还是保持分栏
移动设备上硬撑两栏，阅读体验极差。但直接用 @media (max-width: 768px) 切成单列，又容易忽略“对比”这个核心需求——用户可能仍想滑动横向比对。
更合理的做法是分层响应：
立即学习“前端免费学习笔记（深入）”；
- 小屏（
max-width: 480px）：强制单列，用flex-direction: column - 中屏（
481px - 768px）：保留分栏，但把字体调小、内边距收窄，避免横向滚动 - 大屏（
min-width: 769px）：启用完整对比宽度，同时限制最大宽度（如max-width: 1200px），防止单栏过宽难阅读
别忘了给容器加 box-sizing: border-box，否则 padding 会让计算比例失准。
对比内容里有代码块，怎么防止溢出破坏Flex结构
<pre><code> 这类元素天生不遵守 Flex 的尺寸约束，尤其遇到长行时会直接撑破父容器，导致整页横向滚动。
必须组合三处控制：
- 父级
<pre>加overflow-x: auto和width: 100% - 内部
<code>加display: block和white-space: pre-wrap - 整个对比容器加
align-items: flex-start，避免因高度不一致触发基线对齐错位
如果用 Prism.js 或 Highlight.js，注意它们动态插入的 <span> 可能带内联样式，需用 !important 覆盖掉可能的 white-space: nowrap。
用Flex做对比页，哪些CSS属性真不能省
有些样式看着可选，实际一删就出问题：
-
flex-wrap: nowrap：必须显式声明，否则多栏在窄屏下可能意外换行 -
min-height: 0或min-width: 0：加在子项上，解决 Chrome/Firefox 对 flex 项最小尺寸的默认限制 -
scrollbar-gutter: stable：当某栏出现横向滚动条时，避免另一栏因滚动条出现而跳动 -
gap: 1rem：比用 margin 控制间距更可靠，且不会影响 flex 计算逻辑
移动端 Safari 对 gap 支持较晚（iOS 14.5+），老版本需回退到 padding + margin 组合，但要注意父子 margin 折叠问题。
Flex 做对比页本身不难，难的是所有内容类型都得稳住——特别是混入代码、表格、SVG 或异步加载的内容时，那个看似多余的 min-width: 0 往往就是最后一根救命稻草。
