flex-direction: column 下子元素纵向间距不一致时，align-items 无效，应使用 gap（推荐）或 margin（传统）控制间距，前者简洁无叠加，后者易冲突难维护。
flex 子元素纵向间距不一致的典型表现
用 display: flex + flex-direction: column 布局时，子元素上下紧贴、首尾没留白，或中间间距忽大忽小——这不是 align-items 能解决的问题。align-items 控制的是**交叉轴对齐方式**（横向对齐），在纵列布局中它只影响子元素的水平位置，对纵向间距完全无效。
真正起作用的是 margin 或 gap，不是 align-items
align-items 在 flex-direction: column 下控制的是子项的 水平对齐（left/center/right），和纵向间距无关。要均匀分配纵向空隙，必须用以下两种方式之一：
-
gap：现代标准，推荐优先使用，直接作用于 flex 容器，自动在相邻子项间插入等距间隙 -
margin：传统方式，需手动给每个子项（除最后一个）加margin-bottom，或用:not(:last-child)选择器统一处理
注意：gap 不会作用于容器首尾外边距，若还需首尾留白，得额外给容器设 padding。
gap vs margin 的实操差异与坑点
两者都能实现“纵向等距”，但行为逻辑完全不同：
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
立即学习“前端免费学习笔记（深入）”；
/* ✅ 推荐：gap —— 简洁、可继承、无干扰 */
.container {
display: flex;
flex-direction: column;
gap: 16px; /* 所有相邻子项间 16px 间距 */
padding: 16px 0; /* 若需首尾也空出 16px，补 padding */
}/* ⚠️ margin 方式 —— 易漏写、易冲突、难维护 */
.container > *:not(:last-child) {
margin-bottom: 16px; /* 必须排除最后一个，否则多出多余底部空白 */
}
/* 如果子项本身有 margin-bottom，会叠加，导致间距翻倍 */-
gap不受子项自身margin影响，不会叠加；margin方式一旦子项自带外边距，就容易失控 -
gap在 Flex 和 Grid 中语义统一；margin写法依赖选择器精度，遇到动态增删子项时更脆弱 -
gap兼容性：Chrome 84+/Firefox 63+/Safari 14.1+；如需支持 Safari 13.1 或更早，才考虑降级用margin
align-items 在纵列 flex 中到底该设什么
既然它不影响纵向间距，那它的取值只决定子项在容器中的**水平位置**。常见场景对应关系：
-
align-items: stretch（默认）：子项宽度撑满容器（除非设了固定宽） -
align-items: center：所有子项水平居中，宽度保持内容宽或显式设定宽 -
align-items: flex-start：子项左对齐（按文本方向），适合按钮、表单项等需要左对齐的列表 -
align-items: flex-end：右对齐，少见，慎用，容易因子项宽度不一导致视觉错位
别为了“调间距”去试 align-items: baseline 或 align-items: center——它们只改水平定位，纵向间隙纹丝不动。
