When utilizing the baseline property, it aligns the bottom of the img with the text. In this example, I have added borders to illustrate this alignment.
a img{
height: 40px;
border: 1px solid blue;
}
.links{
display: flex;
align-items: baseline;
}
.links a + a {
border: 1px solid blue;
}
<div class="links">
<a class="img-link"> <img src="https://staticaltmetric.s3.amazonaws.com/uploads/2015/10/dark-logo-for-site.png"></a>
<a>Link 1</a>
<a>Link 2</a>
<a>Link 3</a>
</div>
To align the img with the bottom of the text/link elements, you should use flex-end.
a img{
height: 40px;
border: 1px solid red;
}
.links{
display: flex;
align-items: flex-end;
}
.links a {
border: 1px solid blue;
}
<div class="links">
<a class="img-link"> <img src="https://staticaltmetric.s3.amazonaws.com/uploads/2015/10/dark-logo-for-site.png"></a>
<a>Link 1</a>
<a>Link 2</a>
<a>Link 3</a>
</div>
However, in the 2nd example, there is still a gap below the img.
To eliminate this gap common with inline elements, you can change the img's display type to block.
a img{
display: block;
height: 40px;
border: 1px solid red;
}
.links{
display: flex;
align-items: flex-end;
}
.links a + a {
border: 1px solid blue;
}
<div class="links">
<a class="img-link"> <img src="https://staticaltmetric.s3.amazonaws.com/uploads/2015/10/dark-logo-for-site.png"></a>
<a>Link 1</a>
<a>Link 2</a>
<a>Link 3</a>
</div>