文本项不与 flex-end 对齐

Question

根据 flexbox文档，align-items: flex-end在父级上应该将所有子级对齐到容器的底部。

我做了一个小样本来证明相反的情况。为了使 div 正确对齐，我缺少什么？

.container {
    display: flex;
    flex-direction: row;    
    align-items: flex-end;    
}

.item1 {font-size: 80px;}
.item2 {font-size: 14px;}
.item3 {font-size: 45px;}

<div class="container">
    <div class="item1">Item 1</div>
    <div class="item2">Item 2</div>
    <div class="item3">Item 3</div>
</div>

Answer 1

您正在寻找 flexbox 的 align-items: baseline

.container {
    display: flex;
    flex-direction: row;    
    align-items: baseline; 
     
    border:1px solid red;
}

.item1 {font-size: 80px;}
.item2 {font-size: 14px;}
.item3 {font-size: 45px;}

.container> div {border:1px solid green; }

<div class="container">
    <div class="item1">Item 1</div>
    <div class="item2">Item 2</div>
    <div class="item3">Item 3</div>
</div>

此处记录了弹性框布局模块（“flexbox”）

来自 www.w3.org 文档的有用说明：