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:

Answer 2

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

They are aligned to the end of the cross-axis (bottom, in this case), as specified in the documentation.

.container {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  border: 1px dashed black;
}

.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>

What am I missing in order to make the divs align properly?

Well, if what you really want are the text lines aligned to each other (i.e., baseline alignment), then you should use align-items: baseline, as specified in another answer to this post and explained in detail here:

• What's the difference between flex-start and baseline?

But if you actually want the text aligned to the bottom of the flex container, then you need to consider the line-height of each font size.

The line-height property sets the minimum height of line boxes, where inline elements, such as text, exist. Larger font sizes have larger line heights, by default.

To align the text to the bottom of the container, especially in a container with no defined height (meaning the content of the container sets the height), then you need to play with the line-height values to achieve your goal.

.container {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  border: 1px dashed black;
  /* height: 100px; */ /* uncomment for additional demo */
}


.item1 {font-size: 80px; line-height: 55px; }
.item2 {font-size: 14px; line-height: 11px; }
.item3 {font-size: 45px; line-height: 31px; }

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