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,我们将及时处理。
微信扫码关注
更新实时通知