align-items:baseline 效果演示

align-items

属性取值:

flex-start（子元素集中在侧轴起点，多余或溢出的空间位于侧轴终点）
flex-end（子元素集中在侧轴终点，多余或溢出的空间位于侧轴起点）
center（子元素集中在侧轴的中央，多余或溢出的空间在两侧平均分配）
baseline（子元素沿着它们的基线对齐，多余或溢出的空间可前可后）
stretch（容器空间过剩时，子元素被拉伸到与容器同高）

HTML代码:

<div class="father">
 <div>x</div>
 <div>g</div>
 <div>a</div>
 <div>h</div>
</div>

CSS代码:

.father  {
	width: 120px;
	height: 100px;
	border: 1px solid #ef39d5;
}

.father  {
	display: flex;
	align-items: baseline;
}

.father > div  {
	width: 60px;
}
	
.father div: nth-child(1)  {
	font-size: 40px;
	background: #7f3ffd;
}

.father div: nth-child(2)  {
	font-size: 70px;
	background: #ef39d5;
}

.father div: nth-child(3)  {
	font-size: 30px;
	background: #1bb9f1;
}

.father div: nth-child(4)  {
	font-size: 50px;
	background: #6fb934;
}

运行效果: