使用Flexbox可高效实现响应式页眉布局，通过align-items实现垂直居中，justify-content控制水平分布，配合媒体查询在小屏下切换为垂直排列，适配移动端。
要实现一个响应式页眉布局，使用 CSS 的 Flexbox 是最简单高效的方法。通过 align-items 和 justify-content 属性，可以轻松控制页眉内元素的垂直对齐和水平分布，适配不同屏幕尺寸。
1. 基础Flex布局结构
页眉通常包含 Logo、导航菜单和操作按钮（如搜索或用户登录）。使用 Flex 容器可以让这些元素灵活排列。
HTML 结构示例：<header class="header">
<div class="logo">Logo</div>
<nav class="nav">
<a href="#">首页</a>
<a href="#">关于</a>
<a href="#">服务</a>
<a href="#">联系</a>
</nav>
<div class="actions">
<button>登录</button>
</div>
</header>
2. 使用 align-items 实现垂直居中
页眉高度固定时，希望所有元素在垂直方向上居中对齐，使用 align-items: center 可以一键实现。
CSS 示例：.header {
display: flex;
align-items: center; /* 垂直居中 */
justify-content: space-between; /* 水平分布：两边对齐，中间留空 */
padding: 0 20px;
height: 60px;
background-color: #333;
color: white;
}
.logo {
font-size: 1.5em;
}
.nav a {
color: white;
margin: 0 15px;
text-decoration: none;
}
.actions button {
background: #007bff;
border: none;
padding: 8px 12px;
color: white;
border-radius: 4px;
}
3. justify-content 控制水平布局
该属性决定主轴（默认为水平）上的空间分配。常见取值包括：
立即学习“前端免费学习笔记（深入）”；
- flex-start：靠左对齐
- flex-end：靠右对齐
- center：居中对齐
- space-between：首尾贴边，中间等距
- space-around：元素周围均匀留白
- space-evenly：所有间距完全相等
在页眉中，space-between 最常用，能让 Logo 靠左、操作按钮靠右、导航居中或靠右分布。
4. 响应式适配移动端
当屏幕变窄时，可通过媒体查询调整布局，比如让导航收起或堆叠排列。
添加响应式规则：@media (max-width: 768px) {
.header {
flex-direction: column;
height: auto;
padding: 10px 0;
}
.nav, .actions {
margin-top: 10px;
}
.nav a {
margin: 0 10px;
}
}
此时 flex-direction: column 让元素垂直排列，align-items 仍可控制整体居中，justify-content 则控制列方向的空间分布。
基本上就这些。掌握 display: flex、align-items 和 justify-content 的组合，再配合媒体查询，就能构建出简洁且响应式的页眉布局。不复杂但容易忽略细节，比如容器高度和换行处理。
