如何创建含可换行黄区与不换行红区的动态导航栏

HTML结构 #

<nav class="nav-container">
  <div class="yellow-area">
    <span class="nav-item">菜单项1</span>
    <span class="nav-item">菜单项2</span>
    <span class="nav-item">菜单项3</span>
    <span class="nav-item">菜单项4</span>
    <span class="nav-item">菜单项5</span>
    <span class="nav-item">菜单项6</span>
    <span class="nav-item">菜单项7</span>
  </div>
  <div class="red-area">
    <span class="nav-item">红区菜单项1</span>
    <span class="nav-item">红区菜单项2</span>
  </div>
</nav>

CSS样式 #

/* 导航容器 */
.nav-container {
  width: 100%;
  display: flex;
  align-items: stretch; /* 强制黄区和红区高度一致 */
  gap: 10px; /* 两个区域间的间距，可自定义 */
  padding: 8px;
  box-sizing: border-box;
}

/* 黄区 */
.yellow-area {
  flex: 1; /* 自动填充红区之外的剩余宽度 */
  display: flex;
  flex-wrap: wrap; /* 菜单项自由换行 */
  gap: 8px; /* 菜单项之间的间距 */
  align-content: flex-start; /* 换行内容从上到下排列 */
  background-color: #fff3cd;
  padding: 8px;
}

/* 红区 */
.red-area {
  display: flex;
  white-space: nowrap; /* 菜单项禁止换行 */
  align-items: flex-end; /* 菜单项对齐到底部，和黄区最后一行同线 */
  gap: 8px; /* 菜单项之间的间距 */
  background-color: #f8d7da;
  padding: 8px;
}

/* 通用菜单项样式 */
.nav-item {
  padding: 6px 12px;
  background-color: #fff;
  border-radius: 4px;
}

/* 可选：红区菜单项溢出处理 */
.red-area .nav-item {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

关键逻辑说明 #

1. 导航容器用flex布局，align-items: stretch确保黄区和红区高度完全一致，自动匹配内容最高的区域高度。
2. 黄区通过flex: 1占据页面剩余宽度，flex-wrap: wrap实现菜单项自动换行。
3. 红区用white-space: nowrap阻止菜单项换行，align-items: flex-end让内部菜单项对齐到底部，和黄区最后一行保持同一水平线。

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