Reputation: 61636
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>
Upvotes: 6
Views: 2939
Reputation: 371669
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:
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>
Upvotes: 3
Reputation: 7997
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:
Upvotes: 9