align-self 更适合调单个 input，因其为项目级属性，可单独控制 input 垂直居中而不影响 label 等其他子项；它优先级高于容器级的 align-items，且能与 flex-basis、box-sizing、focus 样式协同生效。
align-self 为什么比 align-items 更适合调单个 input
因为 align-items 是容器级属性，一设就全改；而表单里往往只有 input 高度不稳（比如混用 textarea、select 或带图标的控件），label 文字行数也常变。这时候硬套 align-items: center，反而让 label 文字“飘”在中间、input 内部文字又没对齐——视觉上更乱。
直接给 input 加 align-self: center，既能保留 label 默认的 align-items: flex-start（支持换行），又单独把 input 垂直居中，逻辑更干净。
-
align-self优先级高于align-items，写了就生效，不用动容器整体策略 - label 保持
height: auto和white-space: normal，避免截断长文本 - 若 label 含
span或图标，记得给它加align-self: flex-start防止被 input 的居中拉偏
align-self: center 在 IE11 下不生效？先看父容器高度
IE11 对 align-self 的支持极不稳定，尤其当父容器没明确高度时，它经常直接忽略该声明。这不是你写错了，是渲染引擎压根没算出交叉轴范围。
- 给表单行容器加
min-height: 40px（匹配常见 input 行高），IE11 就能识别对齐上下文 - 避免同时给多个子项设不同
align-self值，IE11 容易随机失效 - 终极兜底：为 IE11 单独加 class，改用
display: table-cell; vertical-align: middle;，只作用于该行
和 flex-basis 搭配时，align-self 容易被“覆盖”
当 input 设了 flex: 1，又加 align-self: center，看起来没问题；但一旦父容器宽度变化、或出现换行，某些浏览器（特别是 Safari）会优先按 flex-basis 分配空间，再计算对齐——此时 align-self 可能延迟生效或错位一像素。
- 确保
input的flex声明显式写出三项，例如flex: 0 1 auto，避免浏览器回退到模糊默认值 - 不要给
input设height，它会和align-self: center冲突（拉伸后内部文字仍按 line-height 布局） - 调试时临时加
border: 1px solid red到input，确认它的盒模型是否真被居中，而不是视觉错觉
focus 状态下 outline 或 border 变化会悄悄顶开 align-self 效果
input:focus 时浏览器默认加 outline，它不占布局空间但视觉外扩，会让 align-self: center 看起来突然偏移；更隐蔽的是某些 reset.css 会在 focus 时增大 border-width，触发重排，导致对齐瞬间失准。
- 统一重置：
input:focus { outline: none; box-shadow: 0 0 0 2px #007bff; } - 如果必须保留
outline，加outline-offset: -2px往内收，避免外扩干扰 - 所有表单控件确保
box-sizing: border-box，防止border变化影响尺寸计算
align-self 调单项对齐不是加一行代码就完事，它得和父容器高度、flex 分配逻辑、焦点样式三者咬合——漏掉任意一个，都可能在 Safari 切换焦点、IE11 加载完成、或小屏换行时突然失准。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
