本文详解如何通过设置 flex-direction: column 将默认水平排列的 Flex 容器子元素（如导航链接）改为垂直堆叠布局，并兼顾居中对齐。

本文详解如何通过设置 `flex-direction: column` 将默认水平排列的 flex 容器子元素（如导航链接）改为垂直堆叠布局，并兼顾居中对齐。

默认情况下，Flex 容器的 flex-direction 值为 row，这意味着所有子元素（如 <a> 标签）会沿主轴水平排列——这正是你看到链接“并排显示”而非“上下堆叠”的根本原因。

要实现垂直布局，只需显式声明 flex-direction: column，使主轴变为垂直方向。此时：

• justify-content: center 会在垂直方向（新主轴）上居中对齐子项；
• align-items: center 则在水平方向（新交叉轴）上居中对齐子项，确保每个链接水平居中。

✅ 正确的 CSS 如下：

CSS3旅游画廊悬停放大动画

一款简约的css3旅游画廊过渡动画效果，鼠标悬停图片放大

下载

.menu {
  display: flex;
  flex-direction: column; /* 关键：切换为主轴垂直 */
  justify-content: center; /* 垂直居中（沿主轴） */
  align-items: center;     /* 水平居中（沿交叉轴） */
  height: 100vh;           /* 可选：配合居中需设定容器高度，如视口全高 */
}

⚠️ 注意事项：

• 若 .menu 父容器高度未明确设定（如无 height 或 min-height），justify-content: center 在垂直方向可能无明显效果，建议添加 height: 100vh 或根据布局需求设置合理高度；
• 所有 <a> 元素默认为内联元素，但在 Flex 容器中自动成为 Flex 项目，无需额外设置 display: block；
• 如需控制链接间间距，推荐使用 gap: 1rem（现代写法），比 margin 更简洁可控。

? 小结：Flex 布局的核心在于理解主轴（flex-direction 决定）与交叉轴。修改 flex-direction 是切换布局流向最直接、最语义化的方式——无需浮动、定位或冗余类名，一行声明即可重构结构逻辑。