View the images below to compare two different codes, where the only variation lies in the align-items rule.
align-items: flex-start
https://i.sstatic.net/hOQP7.png
align-items: baseline
https://i.sstatic.net/vxEeG.png
When utilizing align-items or align-self, using the value flex-start will align flex items at the starting edge of the cross-axis within the flex container.
The baseline value, on the other hand, aligns flex items along their content's baseline.
baseline
It is the line upon which most letters "sit" and below which descenders extend.
https://i.sstatic.net/bNwiG.png
Source: Wikipedia.org
In numerous situations, when font size remains consistent among items (as seen in the question) or the content is identical, then distinguishing between flex-start and baseline becomes challenging.
However, if there are variations in content sizes among flex items, opting for baseline can create a noticeable distinction.
The alignment of baselines hinges on the tallest item present in the row.
According to the specification:
8.3. Cross-axis Alignment: the align-items and align-self properties
baseline
The flex item takes part in baseline alignment, with all participating flex items being aligned so that their baselines match. The item with the biggest distance between its baseline and cross-start margin edge is positioned flush against the cross-start edge of the line.
.flex-container {
color: white;
display: flex;
height: 300px;
background-color: yellow;
justify-content: space-between;
align-items: baseline;
}
.flex-item {
background-color: green;
width: 110px;
min-height: 100px;
margin: 10px;
box-sizing: border-box;
padding: 5px;
text-align: center;
}
.item1 { font-size: 2em; }
.item2 { font-size: 7em; }
.item3 { font-size: .5em; }
.item4 { font-size: 3em; }
.item5 { font-size: 10em; }
/*
.item1 { align-self: flex-start; }
.item2 { align-self: flex-end; }
.item3 { align-self: center; }
.item4 { align-self: baseline; }
.item5 { align-self: stretch; }
*/
#dashed-line {
border: 1px dashed red;
position: absolute;
width: 100%;
top: 170px;
}
<div class="flex-container">
<div class="flex-item item1">A</div>
<div class="flex-item item2">B</div>
<div class="flex-item item3">C</div>
<div class="flex-item item4">D</div>
<div class="flex-item item5">E</div>
</div>
<div id="dashed-line"></div>