当使用 flex-direction: column + flex-wrap: wrap 布局时，align-items 无法控制多列之间的水平对齐；需改用 align-content: flex-start 才能真正实现列容器整体左对齐。

当使用 `flex-direction: column` + `flex-wrap: wrap` 布局时，`align-items` 无法控制多列之间的水平对齐；需改用 `align-content: flex-start` 才能真正实现列容器整体左对齐。

在 CSS Flex 布局中，flex-direction: column 配合 flex-wrap: wrap 可将子项（如

）按垂直方向堆叠、并在容器高度不足时自动换列——这常用于座位表、标签网格等场景。但一个常见误区是：开发者误以为设置 align-items: flex-start 就能让各列左对齐，实际上它只控制单列内子项的交叉轴对齐（此处交叉轴为水平方向），而多列的整体水平分布由 align-content 属性决定。

✅ 正确解法：将 .seating_list 中的 align-items: flex-start 替换为 align-content: flex-start。该属性专用于多行/多列弹性容器（即 flex-wrap: wrap 启用时），定义各行/各列在交叉轴上的对齐方式。flex-start 表示所有列紧贴容器左侧排列，消除右侧空白。

以下是修正后的关键 CSS 片段：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

.seating_list {
  list-style-type: none;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 100px;
  width: 500px;
  gap: 10px;
  overflow-x: auto;
  justify-content: flex-start; /* 主轴（垂直）对齐：顶部对齐 */
  align-content: flex-start;   /* 交叉轴（水平）对齐：列整体左对齐 ✅ */
  margin: 0;
  padding: 0;
}

⚠️ 注意事项：

立即学习“前端免费学习笔记（深入）”；

• align-content 仅在 flex-wrap: wrap 或 wrap-reverse 时生效；若为 nowrap，该属性无效。
• justify-content 控制主轴（此处为垂直方向）的对齐，不影响列的左右位置。
• 确保容器有明确的 width 和 height，否则换列行为可能不可预期。
• 若需兼容旧版浏览器（如 IE10+），注意 gap 属性需配合 -webkit-gap，而 align-content 在 Flexbox 中支持良好。

通过这一调整，无论列表项数量如何变化（如从 4 项增至 7 项），新增列都会严格左对齐，彻底解决“A4 等靠右偏移”的视觉问题。