关闭按钮对不齐因flexbox未设主轴/交叉轴对齐，需用justify-content和align-items组合；图标居中要用display: flex+align-items:center；隐藏时应优先用opacity+visibility+transform动画避免布局塌陷；ie11兼容需用margin-left:auto替代flex:1并双写-align属性。
关闭按钮为什么总对不齐？
Flexbox 本身不会自动把 close 按钮“钉”在右上角，常见错误是只给容器设 display: flex，但没控制主轴/交叉轴方向和对齐方式。按钮位置飘忽，往往是因为没明确 justify-content 和 align-items 的组合，或者父容器高度没撑开。
- 通知栏容器必须设
height或min-height（比如min-height: 48px），否则align-items: center无效 - 用
justify-content: space-between能让文字左对齐、按钮右对齐；若要按钮贴右上角，改用justify-content: flex-end+align-items: flex-start，再配合margin-top - 避免对按钮单独设
float: right—— 它会脱离 flex 流，后续响应式调整会失效
怎么让关闭图标居中且大小可控？
直接用 × 或 SVG 图标时，常出现上下偏移、缩放失真。根本原因是内联元素默认按基线（baseline）对齐，而图标没有文本行高概念。
- 给关闭按钮设
display: flex+align-items: center+justify-content: center，内部图标才真正居中 - 图标用
font-size控制大小，别依赖width/height—— SVG 或字体图标缩放更稳定 - 加
line-height: 1和vertical-align: middle是补救手段，但不如 flex 可靠 - 示例：
.notification-close { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; font-size: 16px; }
点击关闭后通知栏消失，但布局塌陷怎么办？
用 display: none 直接隐藏通知栏，会导致它占位消失，下方内容“唰”一下上移，体验生硬。这不是 bug，是预期行为 —— 但用户感知差。
- 优先用
opacity: 0+visibility: hidden+transform: translateY(-10px)做淡出+上滑动画，保留文档流 - 动画结束后再用 JS 移除 DOM 或设
display: none，避免过渡期间页面跳动 - 如果必须用
display: none，记得给通知栏父容器设min-height，防止塌陷影响布局节奏 - 别忘了加
transition: all 0.2s ease-in-out到通知栏本身，否则 opacity/transform 不会动
IE11 下 flex 关闭按钮错位的兼容写法
IE11 对 flex: 1 和 align-items: center 支持不稳定，尤其当通知文字过长换行时，按钮会掉到第二行末尾。
- 避免用
flex: 1占位，改用margin-left: auto推按钮到最右（IE11 支持良好） - 关闭按钮外层不嵌套多余 div，IE11 对嵌套 flex 容器计算容易出错
- 显式声明
-ms-flex-align: center和align-items: center双写 - 测试时重点关注文字超长 + 屏幕宽度小于 480px 的组合场景，这是 IE11 flex 折叠最易翻车的地方
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
