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

Question

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

从我看到的情况来看，align-items: baseline;属性在块只有1行时效果很好。

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

我试图在没有任何JS的情况下找到一个好的全方位解决方案。

提前致谢。

Answer 1

在撰写CSS框模型对齐时，工作草案提出了要添加到'align-items'的'first'和'last'值。允许：

align-items: last baseline

目前它似乎只有Firefox支持，所以是未来的。

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