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

【问题标题】：Vertical align bottom divs with text of different sizes垂直对齐底部 div 与不同大小的文本
【发布时间】：2014-10-22 18:29:33
【问题描述】：

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

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

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

谢谢！

【问题讨论】：

【解决方案1】：

我设法让他们对此表示赞同：

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

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

【讨论】：

【解决方案2】：

你可以使用：

align-items: baseline;

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

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

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

【讨论】：