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
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
微信扫码关注
更新实时通知