本文介绍如何通过 CSS Flexbox 的 justify-content: space-between 配合合理 HTML 结构，将 logo 和搜索栏分别固定在 header 的右侧与左侧。
本文介绍如何通过 css flexbox 的 `justify-content: space-between` 配合合理 html 结构，将 logo 和搜索栏分别固定在 header 的右侧与左侧。
要实现子元素在父容器中“分居两端”（如搜索栏靠左、Logo 居右），核心在于 利用 Flexbox 的主轴对齐能力，而非依赖 align-self 或冗余的空 div。原代码中存在几个关键问题：HTML 结构未体现逻辑顺序（logo 在前却想显示在右）、CSS 中误用 align-self: flex-end（这是控制交叉轴，即垂直方向），且缺少主轴分布控制。
✅ 正确做法是：
- 调整 HTML 顺序：将左侧内容（搜索栏）放在前面，右侧内容（logo）放在后面——Flexbox 默认按文档流顺序排列，配合 space-between 即可自然撑开；
-
为 header 内部添加一个包裹容器（如 .container），并设置：
display: flex; justify-content: space-between; /* 关键：让首尾子项贴边，中间留白 */ align-items: center; /* 垂直居中对齐 */ width: 100%;
- 移除无效声明：如 .logo { align-self: flex-start } 和 .search-set { align-self: flex-end } ——它们不影响水平位置，反而可能干扰布局。
以下是精简、语义清晰的实现方案：
<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.svg" alt="Company Logo"> -->
</div>
</div>
</header>
header {
display: flex;
background-color: rgb(78, 78, 78);
height: 60px;
}
.container {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
padding: 0 20px; /* 可选：增加内边距避免贴边 */
}
.logo p {
font-size: 1.25rem;
font-weight: 700;
color: white;
margin: 0;
}
#search-bar {
width: 200px;
height: 44px; /* 留出上下 padding 空间更美观 */
padding: 0 16px;
background-color: rgba(255, 255, 255, 0.1);
border: none;
border-radius: 4px;
color: #e6e6e6;
font-size: 0.95rem;
outline: none;
transition: background-color 0.2s;
}
#search-bar:focus {
background-color: rgba(255, 255, 255, 0.15);
}
⚠️ 注意事项：
- 不要滥用 margin-left/right 强制定位（如原 CSS 中的 margin-left: 50px），这会破坏 Flexbox 的弹性优势，且响应式适配困难；
- 是无效类型，应改为 type="search" 或 type="text"；
- 若需支持小屏幕，可在后续添加媒体查询，例如 @media (max-width: 768px) { .container { flex-direction: column; } } 实现堆叠布局；
- 所有颜色建议使用 CSS 变量或设计系统 token 统一管理，提升可维护性。
掌握 justify-content: space-between 是 Flexbox 布局的基础能力之一——它让容器内的首个与末个子元素分别锚定主轴起点与终点，中间无其他兄弟元素时自动分离，简洁高效，无需浮动、绝对定位或复杂计算。
