将弹性框项目与块中最后一个文本行的基线对齐

Question

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

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

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

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

提前致谢。

Answer 1

您可以将 flex 项目的内容包装在内联块包装器中：

.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，

The baseline of an 'inline-block' is the baseline of its last line box in the normal flow, _{^{unless it has either no in-flow line
boxes or if its 'overflow' property has a computed value other than
'visible', in which case the baseline is the bottom margin
edge.}}

Answer 2

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

align-items: last baseline

目前它似乎只被 Firefox 支持，未来也会支持。

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

将弹性框项目与块中最后一个文本行的基线对齐

Align flex-box items to baseline of last text line in a block

css

baseline

flexbox