flex能让箭头始终贴右，关键在于父容器设display: flex并用justify-content: space-between或箭头加margin-left: auto，避免flex: 1误用、绝对定位及DOM节点动态增删导致的错位。
flex 无法让箭头始终贴右，是因为没设 justify-content 或用了 flex: 1 错误撑开
带箭头的导航项（比如「设置 ▸」）常见问题是文字左对齐、箭头右对齐，但用 display: flex 后箭头跑偏、换行或被压缩。核心原因不是 flex 不行，而是没控制好主轴空间分配。
典型错误写法：flex: 1 加在文字容器上，结果它把所有剩余空间吃掉，箭头被挤到下一行或溢出；或者整个菜单项没设 justify-content: space-between，只靠 margin-left: auto 之类“碰运气”对齐。
- 箭头图标建议用
::after伪元素或内联<span></span>，别用绝对定位——否则脱离 flex 流，响应式时容易错位 - 父容器必须设
display: flex且明确主轴方向（flex-direction: row默认可不写） - 文字和箭头两个子元素，推荐：文字用
flex: 1（仅当需填满中间空白），箭头用margin-left: auto或直接配justify-content: space-between - 如果菜单项高度不固定，加
align-items: center防止箭头上下偏移
多级菜单展开箭头旋转失效，常因 transform 未重置或 transition 冲突
点击展开时箭头要从 ▸ 变成 ▼，多数人用 transform: rotate(90deg)，但常出现转一半、卡住、或收起后不回正——根本不是 rotate 写错了，而是 transition 没配对或 transform-origin 偏离中心。
关键点在于：rotate 是累积的。如果上一次状态是 90deg，下次再加 90deg 就变成 180deg，而不是“切回 0”。所以必须显式指定目标角度，不能靠 toggle 类名来回加减。
立即学习“前端免费学习笔记（深入）”；
- 用 class 控制状态时，确保两个类都定义了明确的
transform值，例如.arrow-collapsed { transform: rotate(0deg); }和.arrow-expanded { transform: rotate(90deg); } - 加
transition: transform 0.2s ease到箭头元素本身，别写在父容器上 - 如果箭头是 inline-block 或字体图标，加
transform-origin: center避免绕着左上角转 - 避免同时给
transform和width/height加 transition——浏览器重绘压力大，尤其在低配设备上易卡顿
移动端小屏下箭头被截断，问题出在 min-width 和 padding 没随 flex 调整
桌面端看着正常，一缩到手机屏幕，箭头突然消失或半截显示。这不是媒体查询漏写了，而是 flex 子项默认会收缩（flex-shrink: 1），文字和箭头抢空间，箭头被压扁甚至 visibility: hidden。
字体图标（如 Font Awesome）尤其敏感：一旦宽度小于图标实际渲染所需，就会裁剪。SVG 箭头也一样，viewBox 缩放失真。
- 给箭头容器加
flex-shrink: 0，禁止它被压缩 - 文字部分设
min-width: 0（配合flex: 1）防止它撑开影响整体布局，但别给箭头设 min-width——它本就不该变宽 - 检查父菜单项的
padding是否在小屏下过大，挤压内容区；建议用padding-inline替代padding-left/right，更适配 RTL - 用
overflow: visible确保箭头不被父容器裁剪（很多 UI 框架默认设了overflow: hidden）
React/Vue 中动态渲染箭头时，key 或 ref 导致 flex 错乱
用 v-if 或 {showArrow && <span>▸</span>} 控制箭头显隐，结果菜单项高度跳动、对齐偏移。表面看是 JS 渲染问题，实则是 DOM 节点增删触发了 flex 重新计算，而某些浏览器（特别是 Safari）对空文本节点、注释节点的 flex 行为不一致。
更隐蔽的是：用 ref 绑定箭头元素后手动操作 style.transform，会覆盖 CSS 中的 transition，导致动画中断。
- 避免用条件渲染完全删除箭头节点，改用
visibility: hidden+opacity: 0配合pointer-events: none隐藏（保留 DOM 结构） - 如果必须渲染/卸载，给箭头加稳定
key（比如固定字符串key="menu-arrow"），别用 index 或随机值 - 动画控制优先走 CSS class 切换，JS 层只负责 toggle class，不要直接操作
element.style.transform - 检查框架组件是否包裹了额外 div（如 Vue 的
<transition></transition>会插入 comment node），必要时用display: contents让它不参与 flex 布局
