基线与 Flex-Start 对齐

在灵活布局中，flex-start 在横轴的起点对齐项目，而基线将它们沿着内容的基线对齐。

基线对齐

作为顾名思义，基线对齐锚定了弹性项目的基线，即大多数字符所在的线。基线和交叉起始边缘之间距离最大的项目将与该边缘齐平。

视觉差异

当 Flex 项目的字体大小统一时或者内容相同，Flex-Start 和 Baseline 可能看起来可以互换。但是，当项目大小不同时，就会出现差异。

确定基线

一行中最高的项目确定基线对齐的基线。

示例

考虑以下代码片段：

.flex-container {
  align-items: baseline;
  ...
}
...
.flex-item {
  font-size: 2em;
  ...
}
...
.flex-item.item2 {
  font-size: 7em;
}

具有最大字体大小的项目“B”将确定该行的基线。其他项目将沿“B”的基线对齐，如下图所示。

[使用基线对齐方式在不同高度对齐的弹性项目的图像]

重要提示

并非所有浏览器都支持基线关键字。为了跨浏览器兼容性，请考虑将align-items: flex-start与CSS3的vertical-align属性结合使用。