本文详解如何使用 css `display: flex` 让“1”和“new referral”在同一行内水平对齐，左侧绿色数字块与右侧无背景文字并排显示，并提供可复用的响应式布局方案。
在网页开发中，让两个元素（如编号与标签文本）严格并排显示于同一行，是常见但易出错的布局需求。原代码中 .box-header 仍采用默认文档流（position: absolute + 手动 left/top 定位），导致 .b1 和 .new 实际是层叠而非并排，且位置依赖硬编码像素值，极难维护。
✅ 正确解法：启用 Flexbox 布局
只需为容器 .box-header 添加 display: flex，并配合 align-items: center 垂直居中，即可自然实现水平并排与对齐：
.box-header {
display: flex; /* 启用弹性布局 */
align-items: center; /* 垂直居中子元素 */
width: 782px;
height: 64px;
background: #ffffff;
border-radius: 4px 4px 0px 0px;
}同时，移除 .b1 和 .new 上所有 position: absolute、left、top 等定位属性——Flexbox 会自动按 HTML 顺序从左到右排列子元素。此时结构更语义化、响应性更强：
<div class="box-header">
<div class="b1">
<div class="b11">1</div>
</div>
<div class="new">New Referral</div>
</div>? 进阶优化建议：
- 避免冗余嵌套：.b11 可直接设为 .b1 的内容，无需额外 div；若需居中，用 display: flex; justify-content: center; align-items: center 更简洁。
- 自适应间距：添加 gap: 16px 到 .box-header，替代手动计算 left 值，提升可维护性。
- 视觉一致性：.new 元素建议增加 padding: 0 12px 和 line-height: 64px（匹配容器高度），确保文字垂直居中且呼吸感良好。
⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- 不要混用 position: absolute 与 Flexbox 子项——绝对定位元素会脱离文档流，无法被 flex 容器控制；
- 字体大小、行高需与容器高度匹配（如本例中 .new 高度 24px 但容器高 64px），务必通过 align-items: center 或 line-height 调整垂直对齐；
- 所有颜色值建议统一使用 CSS 变量（如 --primary-green: #25A575;），便于主题切换。
掌握这一模式后，你可轻松扩展为多列并排（如添加图标、状态徽章、操作按钮等），真正实现「结构清晰、样式解耦、维护高效」的专业前端实践。
