Flex布局不处理inline元素，align-items等属性无效，因span等需显式设display为block/inline-block才成flex item；垂直padding对inline元素不撑高父容器，inline-block兼顾行内流与flex对齐。
Flex布局对inline元素根本“视而不见”——它不会把span、label、a这类默认display: inline的元素当作真正的flex item来处理，所以align-items、justify-content、垂直padding全都不起作用。
为什么align-items对span加了也没反应
因为align-items只作用于**flex容器的子项（flex items）**，而span在没改display前仍是inline，浏览器不会把它自动升级为flex item。你加了align-items: center，但它底下压根没东西可对齐——不是失效，是“没被纳入体系”。开发者工具里看computed styles，span的display还是inline，这就实锤了。
- Flex容器不会强制转换子元素的
display值，inline就是inline - 浏览器不报错、不警告，只是静默跳过
- 想让它响应
align-items，必须先让它成为“合格”的flex item：改成block、inline-block或inline-flex
padding-top/padding-bottom撑不开父容器高度
内联元素的垂直padding不参与行框（line box）高度计算，所以即使label背景红了、视觉上“胖了”，父级flex容器仍按文字基线+line-height算高，padding被当成“溢出”处理，不撑高也不影响布局。
- 块级元素（
display: block）的padding会直接计入自身尺寸，父容器自然被撑开 -
inline-block也有效，保留行内流特性，适合图标+文字组合 - 别指望
vertical-align能补救——Flex布局下这个属性被忽略
该选block还是inline-block？
取决于你要不要它继续“坐”在文本流里：
立即学习“前端免费学习笔记（深入）”；
- 用
display: block：彻底脱离行内流，独占一行，需手动加margin控制左右间距 - 用
display: inline-block：保持行内位置，能和文字/其他inline元素并排，align-items: center立刻生效 - 避免
display: inline-flex除非真需要它自己当容器——比如一个span里要再排几个img和span
最常被忽略的一点：改完display后，如果父容器是flex-direction: column且没设height或min-height，align-self依然可能“看不见效果”——因为交叉轴（此时是水平方向）没参考系。这不是inline的问题，是flex对齐本身的前提条件没满足。
