为何align-items在X轴居中元素？justify-content失效问题排查

问题根源 #

当Flex容器设置flex-direction: column时，主轴和交叉轴会完全互换：

• 主轴变为垂直方向（Y轴），对应justify-content属性控制对齐
• 交叉轴变为水平方向（X轴），对应align-items属性控制对齐

你的代码中.page设置了flex-direction: column，却用align-items: center试图实现Y轴居中——实际它控制的是X轴对齐；而justify-content: center无效，是因为.page没有设置高度，垂直方向没有足够空间让该属性生效。

修正方案 #

1. 给.page设置高度（比如占满视口），让垂直主轴有足够的布局空间
2. 根据需求调整justify-content和align-items的组合：
   • 仅Y轴居中：使用justify-content: center
   • 仅X轴居中：保留align-items: center
   • 双轴居中：同时设置两个属性

修正后的CSS代码 #

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&display=swap');

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

.page {
  display: flex;
  /* 双轴居中：Y轴用justify-content，X轴用align-items */
  justify-content: center;
  align-items: center;
  flex-direction: column;
  /* 让容器占满视口高度，给垂直主轴提供布局空间 */
  min-height: 100vh;
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  position: sticky;
  top: 0;
  /* 给navbar设置宽度，避免内容挤压导致space-between失效 */
  width: 100%;
  max-width: 1200px;
}

.rightSide {
  display: flex;
  list-style: none;
}

.rightSide li{
  margin-right: 30px;
}

.rightSide li a {
  text-decoration: none;
  color: black;
  position: relative;
  transition: all 0.5s;
}

.rightSide li a::before {
  content: '';
  width: 0%;
}

.rightSide li a:hover::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 1px;
  background: #000;
  bottom: 0;
  left: 0;
}

.leftSide img {
  width: 80px;
  height: 80px;
  margin-left: 15px;
}

额外提示：.navbar建议设置宽度（如100%或最大宽度），否则justify-content: space-between会因容器宽度不足无法生效，导致左右元素挤在一起。

内容的提问来源于stack exchange，提问作者DYNAM1X25