使用 Flexbox 可实现标题与按钮在同一行垂直居中对齐，通过 display: flex、align-items: center 和 justify-content 控制布局；结合 gap 设置间距，利用媒体查询在小屏幕下切换为垂直排列，提升响应式体验。
在响应式网页设计中，让标题与按钮在同一行对齐，并且在不同屏幕尺寸下保持良好的布局效果，通常会用到 CSS Flexbox 布局。通过 align-items: center 和 justify-content 可以轻松实现垂直居中和水平布局控制。
使用 Flexbox 实现标题与按钮对齐
要使标题（如 h1、h2）和按钮（button 或 a 元素）在同一行并且垂直居中对齐，可以将它们的父容器设置为 flex 容器。
关键点：
- display: flex：启用弹性布局
- align-items: center：让子元素在交叉轴上居中（通常是垂直居中）
- justify-content：控制主轴上的对齐方式（如 flex-start、center、space-between 等）
示例代码：
<div class="header-row"> <h2>页面标题</h2> <button>操作按钮</button> </div>
页面标题
CSS 样式：
.header-row {
display: flex;
align-items: center;
justify-content: flex-start; /* 标题靠左，按钮跟随 */
gap: 1rem; /* 元素之间留出间距 */
}
justify-content 的常用取值说明
根据布局需求，可以选择不同的 justify-content 值来调整标题和按钮的水平分布：
立即学习“前端免费学习笔记（深入）”；
- flex-start：从左侧开始排列（默认）
- center：整体居中显示
- space-between：两端对齐，中间间距平均分配（适合标题在左、按钮在右）
- space-around：元素周围有均匀空间
例如，实现“标题在左，按钮在右”的常见布局：
.header-row {
display: flex;
align-items: center;
justify-content: space-between; /* 左右分开 */
}
响应式适配建议
在小屏幕上，如果标题和按钮并排会导致拥挤，可以设置断点切换为垂直排列。
.header-row {
display: flex;
align-items: center;
justify-content: flex-start;
flex-wrap: wrap; /* 允许换行 */
}
<p>@media (max-width: 600px) {
.header-row {
flex-direction: column;
text-align: center;
gap: 0.5rem;
}
.header-row h2 {
margin-bottom: 0;
}
}</p>这样在手机端，标题和按钮会垂直堆叠，用户体验更佳。
基本上就这些。利用 flex 的 align-items 控制垂直对齐，用 justify-content 控制水平分布，再结合媒体查询做响应式处理，就能灵活实现标题与按钮的对齐布局。不复杂但容易忽略细节，比如 margin 重置或 flex-wrap 设置。
