为什么汉堡菜单仅在CodePen中正常显示，其他环境无法展示？

问题原因 #

你定义的flex交叉轴对齐属性使用错误：.flex-ai-c类中使用的align-content: center仅对多行flex容器生效，你的导航栏是单行flex布局，需要使用align-items: center才能让flex子项在交叉轴居中对齐。本地环境缺失CodePen隐含的默认样式补全，导致汉堡菜单容器高度异常、内部元素被挤压无法显示。

修复方案 #

1. 修正flex对齐属性：

/* 将原.flex-ai-c的代码替换为以下内容 */
.flex-ai-c {
  align-items: center;
}

2. 给汉堡菜单容器补充布局属性，避免a标签默认行内特性导致的高度异常：

.header__menu {
  display: block;
  cursor: pointer;
}

3. 若修复后仍显示异常，打开Chrome开发者工具，选中.header__menu元素，检查Computed面板，确认没有其他全局样式覆盖了display、background-color、opacity等相关属性。

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