justify-content 两端对齐多出空白的相等
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/mip/data/img/dmj/201903141552523667906035.jpg" alt=""> <img src="https://www.qiquanji.com/mip/data/img/dmj/201903141552523667906035.jpg" alt=""> <img src="https://www.qiquanji.com/mip/data/img/dmj/201903141552523667906035.jpg" alt=""> <img src="https://www.qiquanji.com/mip/data/img/dmj/201903141552523667906035.jpg" alt=""> </div> </body> </html> 
本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。
微信扫码关注
更新实时通知