css - 将 flex-box 项目与块中最后一个文本行的基线对齐

Question

我正在尝试使用 flex-box 实现下图中的最后一个示例。

据我所见，align-items: baseline;当块只有 1 行时，该属性效果很好。

该属性align-items: flex-end;产生了一些问题，主要是因为左右项具有不同的字体大小和行高。尽管项目的边缘是对齐的，但当项目没有边框时，由字体大小和行高差异产生的空白看起来非常糟糕。

我正在尝试找到一个没有任何 JS 的良好的全方位解决方案。

提前致谢。

Answer 1

您可以将 flex 项目的内容包装在 inline-block 包装器中：

.flex {
  display: flex;
  align-items: baseline;
}
.inline-block {
  display: inline-block;
}

.item { border: 1px solid red; }
.item:first-child { font-size: 200%; }
.flex::after { content: ''; position: absolute; left: 0; right: 0; border-top: 1px solid blue; }

<div class="flex">
  <div class="item">
    <div class="inline-block">Lorem<br />Ipsum<br />Dolor</div>
  </div>
  <div class="item">
    <div class="inline-block">Foo bar</div>
  </div>
</div>

这会起作用，因为根据CSS 2.1，

'inline-block' 的基线是它在正常流中的最后一个行框的基线，_{^{除非它没有流入行框，或者如果它的 'overflow' 属性具有除 'visible' 之外的计算值，在在这种情况下，基线是底部边距边缘。}}

Answer 2

在编写 CSS 框模型对齐工作草案时，建议将“first”和“last”值添加到“align-items”。将允许：

align-items: last baseline

目前它似乎只被 Firefox 支持，所以未来也是如此。

https://developer.mozilla.org/en-US/docs/Web/CSS/align-items