1949啦网--小小 痛苦,是因为能力和欲望不匹配造成的

align-items在交叉轴上的排列

1、align-items:align-items 属性定义flex子项在flex容器的当前行的侧轴(纵轴)方向上的对齐方式。(对齐弹性盒的各项元素)

<!DOCTYPE html>      <html lang="en">      <head>      	<meta charset="UTF-8">      	<title>Document</title>      	<style type="text/css">      		#hjrh{      			width: 1200px;      			height: 400px;      			border: 2px solid blue;      			margin: 50px auto;      			display: flex;      			/*设置主轴上的排列方式*/      			justify-content: space-between;      			/*设置交叉轴上的排方式*/      			/*align排整齐  items物料项目*/      			/*align-items: flex-end;*/      			/*如果项目没设置高度或设为auto,将占满整个容器的高度*/      			/*stretch (默认值,不加也是默认的) 延伸*/      			/*align-items:stretch; */      			align-items: center;      		}      		#hjrh div{      			width: 150px;      			height: 300px;      			background: blueviolet;      			font-size: 40px;      			text-align: center;      			color: white;      		}      	</style>      </head>      <body>      	<div id="hjrh">      		<div style="height:166px;">1</div>      		<div style="height:298px;">2</div>      		<div style="height:240px;">3</div>      		<div style="height:320px;">4</div>      		<div style="height:400px;">5</div>      	</div>      </body>      </html>

原文链接:https://www.qiquanji.com/post/7511.html

本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。

微信扫码关注

更新实时通知

作者:xialibing 分类:网页教程 浏览: