揭秘CSS(第 1 版)
9.3.3 弹性容器的属性
阅读(

align-items:flex-end 效果演示

align-items

属性取值:






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: flex-end;
}

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

运行效果:

x
g
a
h
← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验