本文详解如何通过嵌套 Flexbox 布局，让 logo 左置、导航菜单右对齐，并消除右侧多余空白——关键在于为菜单容器设置 display: flex 和 justify-content: flex-end。

本文详解如何通过嵌套 flexbox 布局，让 logo 左置、导航菜单右对齐，并消除右侧多余空白——关键在于为菜单容器设置 `display: flex` 和 `justify-content: flex-end`。

在现代网页布局中，使用 Flexbox 实现头部（header）的左右分区是常见需求：左侧放置品牌 Logo，右侧排列导航菜单。但许多开发者会遇到一个问题——菜单虽在视觉右侧，却并未真正“贴边右对齐”，其后仍残留空白区域。这通常是因为仅靠父容器的 justify-content: space-between 无法精准控制子容器内部内容的对齐方式。

根本解法在于分层控制对齐逻辑：

• 外层 .flexbox-1-4 作为主 Flex 容器，负责左右两大区块（logo 区与菜单区）的水平分布；
• 内层 .right 需显式声明 display: flex，使其自身成为 Flex 容器，再通过 justify-content: flex-end 将其中的
  推至最右侧。

以下是优化后的完整 CSS 代码：

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

.left {
  border: 2px solid pink;
  /* 不设 flex，保持固有宽度（如图片尺寸） */
}

.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 结构保持简洁清晰：

<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: 4 和 justify-content: flex-end —— 过大的 flex 值会扩大容器本身，反而加剧右侧空白；flex: 1 更合理，确保它仅填充可用空间；
• 默认带有 margin，务必重置 margin: 0，否则会影响右对齐精度；
• 若菜单项过多导致换行，可添加 flex-wrap: wrap 并配合 align-items: center 维持垂直对齐。

总结：Flexbox 的强大之处正在于这种“容器即上下文”的嵌套能力。右对齐菜单不是靠 text-align 或 margin-left: auto（虽也可行），而是通过明确的父子双层 Flex 布局 + 内部 justify-content 控制，实现语义清晰、响应稳健的对齐效果。