如何在容器内实现文字左右并排布局（CSS Flexbox 实战教程）

本文详解如何使用 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 顺序从左到右排列子元素。此时结构更语义化、响应性更强：

  
    1
  
  New Referral

? 进阶优化建议：

• 避免冗余嵌套：.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;），便于主题切换。

掌握这一模式后，你可轻松扩展为多列并排（如添加图标、状态徽章、操作按钮等），真正实现「结构清晰、样式解耦、维护高效」的专业前端实践。