CSS盒子对齐问题：flex布局响应式导航栏实现求助

现有代码的核心错误是flex-direction: column属性的作用对象错误，该属性需要加在flex布局的父容器上才能控制子元素的排列方向，针对你的需求调整代码如下： #

第一步：补充桌面端基础样式 #

先给header和子元素加基础flex布局样式，保证桌面端对齐正常：

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px;
}
.nav-links {
  display: flex;
  gap: 32px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.line {
  width: 1px;
  height: 28px;
  background-color: #e2e2e2;
  margin: 0 16px;
}
#nav-icon1 {
  /* 桌面端默认隐藏汉堡菜单 */
  display: none;
  cursor: pointer;
}
.register button {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

第二步：修正移动端媒体查询样式 #

调整媒体查询内的规则，将flex纵向排列属性作用在正确的父容器上：

@media only screen and (max-width: 1035px) {
  .line {
    display: none;
  }
  /* 头部父容器改为纵向排列 */
  header {
    flex-direction: column;
    align-items: flex-start;
    position: relative;
  }
  /* 移动端显示汉堡图标，固定在右上角 */
  #nav-icon1 {
    display: block;
    position: absolute;
    right: 24px;
    top: 20px;
  }
  /* 导航列表改为纵向排列，宽度撑满 */
  .nav-links {
    flex-direction: column;
    width: 100%;
    margin: 16px 0;
    /* 默认隐藏，点击汉堡后显示 */
    display: none;
  }
  .nav-links li {
    width: 100%;
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
  }
  /* 注册按钮宽度撑满，和导航同步隐藏 */
  .register {
    width: 100%;
    display: none;
  }
  .register button {
    width: 100%;
  }
  /* 导航展开激活类，通过JS切换 */
  header.nav-active .nav-links,
  header.nav-active .register {
    display: block;
  }
}

第三步：添加汉堡菜单交互逻辑 #

加一段简单JS实现点击汉堡切换导航显示/隐藏：

const hamburger = document.getElementById('nav-icon1')
const header = document.querySelector('header')
hamburger.addEventListener('click', () => {
  header.classList.toggle('nav-active')
})

调整后即可实现桌面端横向排列、移动端头部显示logo+汉堡图标，点击汉堡后展开纵向排列的导航项和注册按钮的效果。

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