Checkbox与文字不对齐源于浏览器默认按baseline对齐替换元素与文本，align-items: flex-start是最直接解法，需作用于包裹input和文字的直接父容器，配合gap控制横向间距。
为什么Checkbox和文字总不对齐？
因为浏览器默认用 baseline 对齐替换元素（如 <input type="checkbox">）和文本，而 checkbox 的“视觉顶部”和文字首行上边缘不一致，尤其在多行文本或不同字号下更明显。这不是 bug，是规范行为 —— 但你不需要迁就它。
align-items: flex-start 是最直接有效的解法
给包裹 <input> 和文字的父容器设 display: flex，再加 align-items: flex-start，就能让 checkbox 上边缘和文字第一行上边缘严格对齐。
- 必须作用于直接父容器，比如
<label class="flex-checkbox-label"></label>，而不是外层表单容器 - 不要对
<input>单独设vertical-align：在 flex item 中无效，且对多行文本无意义 - 如果用了自定义 checkbox 样式（
::before/::after），原生<input>仍是 flex item，对齐逻辑不变
多行 Checkbox 横向排列时，用 gap 控制间距
当一组 checkbox 并排显示（flex-direction: row），优先用 gap 而非 margin-right。
-
gap自动跳过最后一项，无需写:last-child { margin-right: 0 } - 响应式场景下，
gap更稳定 ——margin在 flex wrap 后可能造成末行错位 - 若需兼容老版本 Safari（margin-inline-end 替代，但现代项目基本可忽略
align-content 对多行 Checkbox 容器没用，别乱试
如果你把多个 checkbox 垂直堆叠（flex-direction: column），然后发现 align-content 不生效 —— 这很正常。因为 align-content 只在多行 flex 容器（即启用了 flex-wrap: wrap 或 wrap-reverse）中起作用，而垂直方向单列布局根本不会换行。
立即学习“前端免费学习笔记（深入）”；
真正要控制垂直方向整体对齐（比如让所有 checkbox 顶部贴齐容器），应该用 justify-content（主轴对齐）；要控制每项内部 checkbox 与文字的上下关系，还是回到 align-items。
容易被忽略的是：当容器高度固定、子项又较多时，align-items: stretch（默认值）会让 checkbox 高度被拉伸，破坏控件原始比例 —— 此时显式设 align-items: flex-start 就不只是对齐问题，更是样式稳定性保障。
