Text items do not align with flex-end

Question

According to flexbox documentation, align-items: flex-end on the parent should align all the children to the bottom of the container.

I made a small sample that demonstrates the contrary. What am I missing in order to make the divs align properly?

.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

You are looking for flexbox's 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>

the Flexible Box Layout Module ("flexbox") is documented here

useful illustration from from www.w3.org documentation: