本文详解如何通过嵌套 Flexbox 实现 logo 左置、导航菜单右对齐的响应式头部布局，核心在于为菜单容器设置 display: flex 和 justify-content: flex-end，而非依赖父容器的 space-between。

本文详解如何通过嵌套 flexbox 实现 logo 左置、导航菜单右对齐的响应式头部布局，核心在于为菜单容器设置 `display: flex` 和 `justify-content: flex-end`，而非依赖父容器的 `space-between`。

在现代网页头部（header）布局中，常见需求是左侧放置 Logo，右侧对齐导航菜单（

），且菜单整体紧贴容器右边缘——即空白区域应位于菜单左侧，而非右侧。直接在父级 Flex 容器上使用 justify-content: space-between 并不可靠，因为它会强制拉伸中间元素（若存在），或导致菜单无法真正“靠右”。

正确解法是采用嵌套 Flexbox：

• 外层容器（.flexbox-1-4）保持 display: flex，用于水平排列 Logo 区和菜单区；
• 关键步骤：将 .right 容器自身设为 Flex 容器，并启用 justify-content: flex-end，使其内部的
  自动右对齐；
• 同时，.right 应设为 flex: 1（而非固定比例如 flex: 4），使其占据剩余可用空间，为内部对齐提供基准。

以下是优化后的完整 CSS：

.flexbox-1-4 {
  border: 2px solid red;
  display: flex;
  align-items: center; /* 垂直居中对齐 logo 与菜单 */
  padding: 4px;
}

.left {
  border: 2px solid pink;
  /* 不设 flex，保持内容自然宽度（如 logo 固定宽） */
}

.right {
  flex: 1;               /* 占据剩余空间，为右对齐提供布局上下文 */
  border: 1px solid lime;
  display: flex;         /* 启用 Flex 上下文 */
  justify-content: flex-end; /* 核心：让 ul 紧贴右侧 */
}

ul {
  list-style: none;
  border: 2px solid cyan;
  margin: 0;             /* 移除默认外边距，避免偏移 */
  padding: 0;            /* 移除默认内边距 */
}

ul li {
  display: inline-block;
  padding-right: 18px;
}

HTML 结构保持简洁清晰，无需额外 wrapper：

<div class="flexbox-1-4">
  <div class="left">
    <img src="https://upload.wikimedia.org/wikipedia/commons/7/7d/Wikimedia-logo-200px-transparent.png?x-oss-process=image/resize,p_40"    style="max-width:90%">
</div>
  <div class="right">
    <ul>
<li>Coffee</li>
      <li>Tea</li>
      <li>Milk</li>
      <li>Water</li>
      <li>Orange</li>
    </ul>
</div>
</div>

✅ 注意事项：

• 避免给 .right 设置过大的 flex 值（如 flex: 4），这会导致其过度扩张，挤压 .left 或破坏对齐逻辑；
• 务必重置
  的 margin 和 padding，否则浏览器默认样式会干扰右对齐效果；
• 若菜单项需响应式换行（如小屏幕），可将 .right 的 flex-wrap: wrap 与 justify-content: flex-end 结合使用，并配合 text-align: right 作为降级方案。

该方案语义清晰、兼容性好（支持所有现代浏览器及 IE11+），是构建灵活、可维护导航栏的标准实践。