CSS中baseline、first baseline与last baseline的区别是什么？

这三个值都是用来控制flex容器内元素的基线对齐逻辑，核心差异在于对齐的基线位置：

• baseline：这是一个历史兼容值，在现代浏览器中完全等价于first baseline，作用是让元素的第一行文本基线与容器内其他元素的第一行基线对齐。
• first baseline：明确指定以元素的第一行文本基线作为对齐基准，无论元素内有多少行内容，都以最顶部的那行文本基线来对齐。
• last baseline：与前两者相反，它以元素的最后一行文本基线作为对齐基准，让容器内所有元素的最后一行基线对齐。

单行文本场景示例 #

在你提供的示例里，所有元素都是单行文本，所以baseline和first baseline视觉效果一致，last baseline因为是单行，也和前两者看起来没区别，但如果元素包含多行文本，差异就会很明显。

CSS代码

.flex-container {
  color: white;
  display: flex;
  width: 300px;
  height: 200px;
  background-color: yellow;
}

.flex-item {
  background-color: green;
  width: 50px;
  min-height: 100px;
  margin: 10px;
}

.item1 {
  align-self: flex-start;
}

.item2 {
  align-self: baseline;
}

.item3 {
  align-self: first baseline;
}

.item4 {
  align-self: last baseline;
}

HTML代码

<div class="flex-container">
  <div class="flex-item item1">flex-start</div>
  <div class="flex-item item2">baseline</div>
  <div class="flex-item item3">first baseline</div>
  <div class="flex-item item4">last baseline</div>
</div>

多行文本场景的差异演示 #

如果把item4改成多行文本：

<div class="flex-item item4">last baseline<br>第二行</div>

此时item4会以最后一行“第二行”的基线和其他元素的基线对齐，视觉上会比其他元素更靠下，就能直观看出和first baseline/baseline的区别。

内容的提问来源于stack exchange，提问作者Jay Wang