align-items管交叉轴、justify-content管主轴，二者互不干扰；主轴由flex-direction决定：默认row时主轴水平（justify-content控左右）、交叉轴垂直（align-items控上下），column时则角色互换。
align-items 和 justify-content 各管哪根轴？
冲突常源于误以为这两个属性能“互相覆盖”或“同时控制一个方向”。其实它们完全独立：justify-content 只管主轴（flex-direction: row 时是水平，column 时是垂直），align-items 只管交叉轴（与主轴垂直的方向）。写错方向就白设。
- 主轴是
flex-direction决定的：默认row→ 主轴水平，justify-content控左右，align-items控上下 - 改成
flex-direction: column→ 主轴变垂直，justify-content就控上下，align-items反而控左右 - 想单个子项右下角定位？别只靠
justify-content: flex-end+align-items: flex-end—— 这会让所有子项都挤过去；该用margin-left: auto+margin-top: auto
子项设置了 width/height 为什么 align-items: center 不生效？
align-items: stretch（默认值）会被固定宽高打断，但 center 不会“拉伸”，它只是居中——前提是交叉轴有可用空间。如果父容器没设高度（比如 height: auto），align-items: center 在垂直方向就找不到参考基准。
- 父容器必须有明确的交叉轴尺寸：横向布局（
flex-direction: row）时，需设height；纵向布局（flex-direction: column）时，需设width - 子项若带
height: 100px，又希望它在父容器里垂直居中，得确认父容器height大于 100px，否则没空间可居中 - 更稳妥的做法是去掉子项的固定
height，改用flex: 1或align-self: center配合父容器尺寸
嵌套 Flex 容器时 align-items 为啥不穿透？
align-items 不会向下继承，它只作用于当前 Flex 容器的**直接子项**。外层设了 align-items: center，里面再套一个 display: flex 的盒子，那盒子本身是被居中的，但它里面的文字不会自动居中——除非那个内层容器也设 align-items: center。
- 常见错误：Grid 容器里放 Flex 导航栏，导航栏里放按钮，结果按钮不垂直居中 → 因为 Grid 的
align-items只对导航栏生效，不对按钮生效 - 解决方法不是“传下去”，而是逐层显式设置：外层 Grid 设
align-items: center，内层 Flex 也设align-items: center - 注意
align-self可覆盖单个子项的align-items，但仅限交叉轴；主轴单元素定位仍得靠margin-left/right: auto
label 和 input 基线对不齐怎么解？
用 align-items: baseline 往往失效，因为 <input> 是替换元素，其基线位置和 <label></label> 文本不一致。这不是 bug，是浏览器按规范渲染的结果。
- 首选方案是
align-items: last baseline：它取每个子项最后一行文本的基线，对<input>（placeholder 或输入内容）、<label></label>都可靠对齐 - 兼容旧浏览器可降级为
align-items: center，但视觉精度下降 - 避免用
transform: translateY()或margin-top微调——字体缩放、字号切换时极易偏移 - 确保
<label></label>和<input>的font-size和line-height一致，否则基线计算会有偏差
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
