css - 垂直对齐底部 div 与不同大小的文本

Question

在 flexbox 中，如何垂直对齐两个不同 div 中具有两种不同字体大小的文本的底部边缘？

这是一个非常简单的 jsfiddle: http://jsfiddle.net/aegh74dr/1/

您会注意到 flexbox 中的两个 div 包含不同大小的字体。 align-items属性设置为flex-end，但是两个不同的div在底部没有对齐。

谢谢!

Answer 1

您可以使用:

align-items: baseline;

使用像基线这样的值可以使元素对齐，例如它们的基线对齐。


正如 Mozilla 开发者网络描述的那样 align-items: baseline; :

The baselines (leading edge or trailing edge depending on the flex-direction property) of all flex items are aligned with each other. The flex item that occupies the most space, perpendicular to the layout axis, follows the flex-start rule. The baselines of all remaining elements are then aligned with the baseline of this element.

演示 http://jsfiddle.net/a_incarnati/aegh74dr/2/