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

Question

在弹性框中，如何在两个不同的div中以两种不同的字体垂直对齐文本的底边？

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

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

谢谢！

Answer 1

您可以使用：

align-items: baseline;

使用类似基线的值可以使项目对齐，例如基线对齐。


正如Mozilla Developers Networks所述align-items: baseline;：

  

基线（前缘或后缘取决于   所有flex项的flex-direction属性都与每个flex对齐   其他。占据最大空间，垂直于的弹性项目   布局轴遵循flex-start规则。所有的基线   然后将剩余的元素与该元素的基线对齐。

DEMO http://jsfiddle.net/a_incarnati/aegh74dr/2/

Answer 2

我设法让他们排成一行：

div.large {
    font-size: 32px;
    height: 32px;
}

div.small {
    font-size: 16px;
    line-height: .92em;
    height: 16px;
}