CSS Flex布局如何实现粘性侧边栏？

position: sticky 失效主因是父容器无明确高度或滚动上下文、未设有效top值、祖先存在transform/filter/overflow等干扰属性；缺一即退化为relative/static。

为什么用 position: sticky 实现侧边栏会失效？

position: sticky 不是“悬浮”，而是“在父容器内滚动到临界点时暂停”。侧边栏若要随页面滚动始终可见，必须脱离文档流——而 sticky 仍属于文档流，一旦父容器高度不够、或父容器没设 overflow: visible（默认就是），它就会提前脱离粘滞状态，甚至完全不触发。常见现象：侧边栏只在首屏可见，一滚动就消失；或卡在父容器顶部不动。

1. 父容器必须有明确高度（如 height: 100vh 或 max-height），否则 sticky 无临界点可计算
2. 父容器不能是 display: flex 且未设 flex-direction: column —— Flex 容器对 sticky 的锚点行为支持不稳定，尤其 Safari
3. top 值必须有效：写 top: 0 但父容器没滚动空间，等于没用；写 top: 24px 却忘了留出上边距，可能被 header 挡住

position: fixed 才是真正可行的方案

固定定位才是视口级悬浮的唯一可靠路径。但直接套 fixed + display: flex 很容易白忙活——因为 fixed 元素脱离文档流后，Flex 容器若没显式宽高，实际尺寸常为 0px × 0px，图标全堆左上角，点击区域也无效。

1. 必须给容器设 width 和 height（如 width: 60px; height: 240px;），不能靠子项撑开
2. 垂直居中用 top: 50%; transform: translateY(-50%);，别依赖父容器的 align-items（它不起作用）
3. 水平定位用 right: 24px（非 0），留安全边距防 iOS 截断
4. 子按钮统一设 width: 100% + 固定 height，避免文字长度影响布局

Flex 容器内部怎么排按钮才不拉伸变形？

SVG 图标、文字标签在 Flex 容器里容易被拉宽或压扁，尤其当容器高度固定但内容高度不一时。

1. 每个按钮设 flex: 0 0 auto，禁用伸缩，防止 flex-grow 或 flex-shrink 干预
2. 用 gap: 8px 控制间距，比 margin 更稳定（margin 在 fixed 下易被外部样式污染）
3. 若含 <svg>，务必在标签内写死 width 和 height 属性（如 <svg width="24" height="24">），纯 CSS 缩放会加剧渲染偏移
4. 避免同时写 right: 24px 和 justify-content: flex-end——定位值和 Flex 对齐逻辑冲突，导致位置飘忽

iOS Safari 上抖动、跳位怎么压？

这不是 bug，是 WebKit 渲染管线对视口锚点重计算的延迟表现。软键盘弹出、快速滚动时，fixed + flex 组合极易上下跳动。

1. 必须加 will-change: transform 到容器上，触发硬件加速，这是最轻量也最有效的缓解手段
2. 别在同一个元素上叠加 top/bottom 和 transform: translateY()，反而加重跳变
3. 慎用 overflow: hidden——它可能剪掉抖动产生的临时溢出，但掩盖了真实问题，应优先解决根源

真正稳定的侧边栏，从来不是靠“猜 Flex 行为”实现的。它需要你亲手钉死宽高、绕过隐式规则、并在关键节点加硬件加速提示——这些动作看起来琐碎，但每一条都对应着某个浏览器渲染链路上的真实约束。