本文详解如何利用 Flexbox 的 justify-content: space-between 实现子元素在父容器内左右两端对齐，适用于导航栏、页眉等常见布局场景，并提供可直接运行的结构化代码示例。
本文详解如何利用 flexbox 的 `justify-content: space-between` 实现子元素在父容器内左右两端对齐，适用于导航栏、页眉等常见布局场景，并提供可直接运行的结构化代码示例。
在现代 CSS 布局中，Flexbox 是实现水平两端对齐最简洁高效的方式。核心思路是：将父容器设为 flex 容器，并使用 justify-content: space-between，使第一个子元素紧贴左侧，最后一个子元素紧贴右侧，中间若有其他元素则自动均匀分布（本例中仅需两个关键元素：搜索框与 Logo）。
以下是推荐的结构化实现方式：
✅ HTML 结构优化建议
避免无意义的空 <div>，将 .logo 和 .search-set 置于同一层级的语义化容器（如 .container）中，提升可维护性与可访问性：
<header>
<div class="container">
<div class="search-set">
<form id="s-bar-holder" role="search">
<input type="search" id="search-bar" name="q" placeholder="Search..." aria-label="Search the site." />
</form>
</div>
<div class="logo">
<p>LOGO</p>
<!-- 或替换为 <img src="logo.png" alt="Company Logo"> -->
</div>
</div>
</header>⚠️ 注意：<input type="query"> 并非标准 HTML 类型，应改为 type="search" 以确保语义正确与浏览器兼容性。
✅ CSS 关键样式
父容器 .container 承担 Flex 布局职责，而 <header> 仅作为外层容器（可添加背景、高度等全局样式）：
header {
background-color: rgb(78, 78, 78);
height: 60px;
}
.container {
display: flex;
align-items: center; /* 垂直居中对齐 */
justify-content: space-between; /* 关键：左右两端分布 */
width: 100%;
padding: 0 20px; /* 可选：增加内边距避免贴边 */
box-sizing: border-box;
}
.logo,
.search-set {
height: 100%;
}
#search-bar {
background-color: rgb(78, 78, 78);
border: none;
color: rgb(230, 230, 230);
outline: none;
height: 58px;
width: 200px;
font-size: 16px;
padding: 0 12px;
}? 为什么原方案未生效？
- 直接对 <header> 应用 display: flex 虽可行，但子元素默认按文档流顺序排列（左→右），若 .logo 在 .search-set 之后，则 Logo 会出现在右侧——顺序决定位置；
- align-self: flex-end 对水平布局无效，它仅控制单个子项在交叉轴（垂直方向）的位置；
- 缺少 justify-content 控制主轴对齐，导致所有子项默认挤在左侧。
? 进阶提示
- 如需响应式适配（如移动端折叠搜索框），可在媒体查询中将 .container 改为 flex-direction: column 或配合 order 属性重排；
- 若需更精细控制（如 Logo 固定宽度、搜索框自适应剩余空间），可结合 flex: 0 0 300px（Logo）与 flex: 1（搜索区）实现弹性分配。
通过以上方法，你就能稳定、语义清晰地实现页眉中“左搜索、右 Logo”的经典布局，且完全符合现代 CSS 最佳实践。
