justify-content 两端对齐多出空白的相等
时间:5年前 阅读:7014
1、justify-content 用于设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式。
2、使用 align-content 属性对齐交叉轴上的各项(垂直)。
<!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内容 end结束,终止(从结束部分开始排的意思)*/ /*start(默认值)开始 起点 意思是从左边开始的地方排*/ /*justify-content:flex-start;*/ /*justify-content: flex-end;*/ /*space 空白 between当中,中间 意思是两端对齐多出空白的相等,*/ justify-content: space-between; /*around 围绕 到处,四处; 在周围 意思是左右都平分空白*/ /*justify-content: space-around;*/ } </style> </head> <body> <div id="hjrh"> <img src="https://www.qiquanji.com/data/img/dmj/201903141552523667906035.jpg" alt=""> <img src="https://www.qiquanji.com/data/img/dmj/201903141552523667906035.jpg" alt=""> <img src="https://www.qiquanji.com/data/img/dmj/201903141552523667906035.jpg" alt=""> <img src="https://www.qiquanji.com/data/img/dmj/201903141552523667906035.jpg" alt=""> </div> </body> </html>
本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。
微信扫码关注
更新实时通知
网友评论