垂直對齊不同大小的文本的底部divs

Question

在flex框中，如何垂直對齊兩個不同大小的文本的底部邊緣並使用兩種不同的字體大小？

這是一個非常簡單的jsfiddle： http://jsfiddle.net/aegh74dr/1/

你會發現，柔性方框內的兩個div包含不同大小的字體。 align-items屬性設置爲flex-end，但兩個不同的div不在底部對齊。

謝謝！

Answer 1

您可以使用：

align-items: baseline; 

使用值一樣基線允許項目進行排列，如它們的基線對齊。


如Mozilla開發網絡描述align-items: baseline;：

的基線（前緣或後視 撓曲方向屬性邊緣）中的所有柔性物品與其他各 對齊。佔據最多空間的彈性項目，垂直於佈局軸線，遵循柔性啓動規則。然後將所有 其餘元素的基線與該元素的基線對齊。

DEMOhttp://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; 
}