align-items作用于flex容器，控制其直接子元素在交叉轴上的对齐方式；仅当父元素设display: flex/inline-flex时生效，交叉轴方向由flex-direction决定。
align-items 在 flex 容器中到底对谁起作用
align-items 不是设置子元素自身在页面中的垂直居中，而是控制所有直接子元素（flex item）在交叉轴（cross axis）上的对齐方式。它只在父容器声明了 display: flex 或 display: inline-flex 时才生效。如果父容器是 grid，该属性无效；如果没设 display，它完全被忽略。
常见错误现象：align-items: center 写了但没反应——大概率是父容器没加 display: flex，或者子元素被 float / position: absolute 脱离了 flex 流。
- 必须作用于 flex 容器（父元素），不是子元素
- 交叉轴方向取决于
flex-direction：默认row时交叉轴是垂直方向；设为column时交叉轴变成水平方向 - 不适用于单个子元素的独立对齐，如需单独控制某一项，请用
align-self
align-items 常用值和实际效果差异
不同取值在视觉上区别明显，但容易混淆的是 flex-start 和 stretch 的默认行为：
-
flex-start：所有子元素贴交叉轴起点对齐（默认flex-direction: row时即顶部对齐） -
center：居中对齐——最常用，但注意：若子元素高度不固定，且没设height或min-height，可能看起来“没变化”，因为内容高度就是容器高度 -
stretch（默认值）：子元素拉伸填满交叉轴 —— 这是关键：如果子元素没设高度，它会撑开；但如果子元素写了height: 20px，它就不会再拉伸 -
flex-end：贴交叉轴终点（默认 row 下即底部对齐） -
baseline：按第一行文字基线对齐，适合多行文本或带图标按钮组，但对图片/块级元素效果不稳定
为什么 align-items:center 在某些情况下“失效”
典型场景：容器有 padding、子元素用了 margin-top/margin-bottom、或父容器高度未明确——这些都会干扰视觉判断。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 父容器没有设定高度（
height或min-height），而子元素又没内容撑开，此时align-items: center实际已生效，但容器本身高度为 0，看不出效果 - 子元素设置了
margin-top等外边距，会叠加在 flex 对齐之上，造成偏移错觉 - 子元素用了
vertical-align（仅对 inline/inline-block 有效），与 flex 无关，纯属干扰项 - 父容器存在
align-content: flex-start（多行 flex 才生效），但它不影响单行下的align-items
调试建议：给父容器加 border: 1px solid red，子元素加 background: #eee，一眼看清边界和对齐基准线。
替代方案：什么时候不该用 align-items
当目标不是“所有子元素统一交叉轴对齐”，而是“让某个内容块在容器里真正垂直+水平居中”，align-items 单独不够用。
- 单个子元素居中：更稳妥的是
display: flex+justify-content: center（主轴）+align-items: center（交叉轴）组合 - 非 flex 场景（比如普通 block 容器）：用
display: grid+place-items: center更简洁 - 需要兼容老浏览器（IE10/11）：
align-items支持但有 bug，建议避免stretch和baseline，优先用flex-start/center - 子元素本身是绝对定位：它已脱离 flex 流，
align-items对它完全无效
真正容易被忽略的点：交叉轴对齐效果是否可见，高度依赖父容器是否有确定的交叉轴尺寸——这比写对属性名还关键。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
