使用Flex在小屏设备调整导航栏元素顺序的最佳实践

已实现基础响应式导航栏，小屏设备（<768px）采用汉堡菜单。现有代码如下，需求是在小屏设备上将导航栏可见元素顺序调整为：汉堡菜单→品牌→图标，求最佳实践与实现思路。

现有代码 #

JavaScript #

const hamburger = document.querySelector('.hamburger');
const navMenu = document.querySelector('.nav-menu');

hamburger.addEventListener('click', () => {
  hamburger.classList.toggle('active');
  navMenu.classList.toggle('active');
});

document.querySelectorAll('.nav-link').forEach((link) =>
  link.addEventListener('click', () => {
    hamburger.classList.remove('active');
    navMenu.classList.remove('active');
  })
);

CSS #

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

header {
  background-color: grey;
}

li {
  list-style: none;
}

a {
  color: white;
  text-decoration: none;
}

.navbar {
  min-height: 112px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
}

.nav-menu {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 60px;
}

.nav-icons {
  display: flex;
}

.nav-icon:not(:last-child) {
  margin-right: 24px;
}

.nav-branding {
  font-size: 2rem;
}

.nav-link {
  transition: 0.7 ease;
}

.nav-link:hover {
  color: blue;
}

.hamburger {
  display: none;
  cursor: pointer;
}

.bar {
  display: block;
  width: 25px;
  height: 3px;
  margin: 5px auto;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  background-color: white;
}

@media (max-width: 768px) {
  .hamburger {
    display: block;
  }

  .hamburger.active .bar:nth-child(2) {
    opacity: 0;
  }
  .hamburger.active .bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }

  .hamburger.active .bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }

  .nav-menu {
    position: fixed;
    left: -100%;
    top: 100px;
    gap: 0;
    flex-direction: column;
    background-color: lightcoral;
    width: 100%;
    text-align: center;
    transition: 0.3s;
  }

  .nav-item {
    margin: 16px 0;
  }

  .nav-menu.active {
    left: 0;
  }
}

HTML #

<header class="header">
  <nav class="navbar">
    <a href="#" class="nav-branding">Site</a>

    <ul class="nav-menu">
      <li class="nav-item">
        <a href="#" class="nav-link">What</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">Where</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">When</a>
      </li>
    
    </ul>

    <!-- Icons -->
    <ul class="nav-icons">
      <li class="nav-icon"><img src="../../assets/search.svg" alt="search" width="24" height="24"></li>
      <li class="nav-icon"><img src="../../assets/account.svg" alt="account" width="24" height="24"></li>
      <li class="nav-icon"><img src="../../assets/cart.svg" alt="cart" width="24" height="24"></li>   
    </ul>

    <div class="hamburger">
      <span class="bar"></span>
      <span class="bar"></span>
      <span class="bar"></span>
    </div>
  </nav>
</header>

核心方案：利用CSS Flexbox的order属性 #

无需修改HTML结构，通过order属性调整flex容器内元素的视觉排列顺序，这是响应式布局中调整元素顺序的标准方案——既保留HTML语义化逻辑，又能灵活适配不同屏幕尺寸。

具体实现步骤 #

1. 确认容器基础：当前.navbar已设置display: flex，满足使用order属性的前提。
2. 在小屏断点中设置元素顺序：针对max-width:768px的媒体查询，给三个目标元素分配order值（数值越小，排列越靠前）：
   • 汉堡菜单（.hamburger）设置order: -1，使其排在所有默认order:0的元素之前
   • 品牌（.nav-branding）保持默认order:0（可显式声明增强可读性）
   • 图标组（.nav-icons）设置order:1，排在品牌之后
3. 调整容器对齐（可选）：若要让元素在导航栏中合理分布，可修改.navbar的justify-content属性，比如用space-between实现汉堡居左、图标居右、品牌居中的布局，或用flex-start让元素紧凑排列。

修改后的CSS媒体查询代码 #

@media (max-width: 768px) {
  .hamburger {
    display: block;
    order: -1; /* 新增：让汉堡排在最左侧 */
  }

  .nav-branding {
    order: 0; /* 可选：显式声明默认顺序，增强可读性 */
  }

  .nav-icons {
    order: 1; /* 新增：让图标排在最右侧 */
  }

  /* 原有代码保持不变 */
  .hamburger.active .bar:nth-child(2) {
    opacity: 0;
  }
  .hamburger.active .bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }

  .hamburger.active .bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }

  .nav-menu {
    position: fixed;
    left: -100%;
    top: 100px;
    gap: 0;
    flex-direction: column;
    background-color: lightcoral;
    width: 100%;
    text-align: center;
    transition: 0.3s;
  }

  .nav-item {
    margin: 16px 0;
  }

  .nav-menu.active {
    left: 0;
  }
}

方案优势 #

• 语义化友好：不改动HTML结构，保持品牌优先的逻辑顺序，符合SEO和无障碍访问要求
• 维护简单：仅通过CSS修改布局，无需调整JS或HTML
• 性能高效：CSS属性修改仅触发重排，比操作DOM节点更高效

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