通过 display: flex 配合 align-items: flex-start，可在不修改 HTML 结构的前提下，精准控制复选框与多行文本的垂直对齐关系，确保首行基线一致且后续换行自然左对齐。

通过 `display: flex` 配合 `align-items: flex-start`，可在不修改 html 结构的前提下，精准控制复选框与多行文本的垂直对齐关系，确保首行基线一致且后续换行自然左对齐。

在实际开发中，常遇到如下场景：一个

内直接嵌套 和一段长文本（无额外标签包裹），期望复选框与文本首行顶部对齐，同时文本换行后仍保持左侧对齐、视觉整齐——但默认文档流下， 作为替换元素，其基线（baseline）会与文本第一行的字母底部对齐，导致视觉上“下沉”，尤其在多行文本时更显突兀。

此时，无需添加任何 wrapper 元素或修改 HTML 结构，仅需一行关键 CSS 即可优雅解决：

div {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem; /* 可选：控制复选框与文本间距，推荐使用 gap 替代 margin */
}

✅ 效果说明：

• display: flex 将
  转为弹性容器，其子元素（ 和文本节点）成为 flex 项目；
• align-items: flex-start 确保所有项目沿交叉轴（此处为垂直方向）顶端对齐，即复选框顶部与文本第一行的顶部（非基线）严格齐平；
• gap 提供语义化、无副作用的间距控制，避免因 margin 引发的外边距合并或布局干扰。

⚠️ 注意事项：

• 文本内容是匿名文本节点（anonymous text node），在 Flex 布局中会被自动包装为一个 flex item，因此无需额外 包裹；
• 若需兼容 IE10+，gap 属性需配合 margin 回退（如 margin-left: 0.75rem 作用于文本节点的伪类，但现代项目建议忽略 IE）；
• 避免使用 vertical-align（对 flex item 无效）或 line-height（易破坏多行文本行高一致性）等传统方案；
• 如需复选框居中对齐文本行高（如与中文字体 x-height 对齐），可改用 align-items: center，但通常 flex-start 更符合表单控件的设计惯例。

? 进阶提示：若该模式需全局复用，建议抽离为工具类，例如：

.flex-checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

然后在 HTML 中直接应用：

<div class="flex-checkbox-label">
  <input type="checkbox">
  Lorem ipsum dolor sit amet...
</div>

这一方案简洁、健壮、语义清晰，是现代 CSS 布局解决内联控件对齐问题的标准实践。