如何使用CSS实现Flexbox容器内的文本基线对齐

需求还原 #

需要实现的最终布局为：

已通过flexbox和align-self: baseline实现了基础布局，当前效果如下：

现在需要新增「leave in」文本，使其与「3 min」的基线保持对齐。

实现方案 #

将需要基线对齐的「leave in」「3」「min」三个元素包裹在同一个独立的flex子容器中，统一控制组内元素的基线对齐规则即可，完整代码如下：

<div style="background-color: #fce5cdff; display: flex; align-items: center; height: 4.35cm; padding: 0 12px; gap: 24px;">
  <div style="font-size: 24pt">Ferry to Brookfield</div>
  <!-- 时间组容器，内部统一基线对齐 -->
  <div style="display: flex; align-items: baseline; gap: 6px;">
    <div style="font-size: 12pt">leave in</div>
    <div style="font-size: 96pt">3</div>
    <div style="font-size: 9pt">min</div>
  </div>
</div>

关键说明 #

• 时间组容器设置align-items: baseline后，内部所有子元素会自动按基线对齐，无需给每个子元素单独配置align-self属性
• 外层flex容器设置align-items: center，保证左侧标题和右侧时间组整体垂直居中，匹配设计图的视觉效果
• 可以通过调整gap属性的值，灵活修改不同元素之间的间距，适配实际设计需求

内容的提问来源于stack exchange，提问作者Kerrick Staley