文章目录 第一种水平均匀分布的效果实现方式实现代码： 第二种水平排列方式效果实现方式实现代码 第一种水平均匀分布的效果 实现方式
给父级元素设置样式：
display: flex; justify-content: space-around; 实现代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>flex实现水平方向均匀分布</title> <style> #main { width: 500px; height: 200px; border: 1px solid #000; /* 使子级元素在水平方向均匀分布（最左边、最右边留空白） */ display: flex; justify-content: space-around; } .one { width: 100px; height: 100px; background-color: aquamarine; } .two { width: 100px; height: 100px; background-color: peru; } .three { width: 100px; height: 100px; background-color: palevioletred; } .four { width: 100px; height: 100px; background-color: yellow; } </style> </head> <body> <div id="main"> <div class="one"></div> <div class="two"></div> <div class="three"></div> <div class="four"></div> </div> </body> </html> 第二种水平排列方式效果 实现方式 display: flex; justify-content: space-between; 实现代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>flex实现水平方向均匀分布</title> <style> #main { width: 500px; height: 200px; border: 1px solid #000; /* 使子级元素在水平方向均匀分布（最左边、最右边不留空白） */ display: flex; justify-content: space-between; } .one { width: 100px; height: 100px; background-color: aquamarine; } .two { width: 100px; height: 100px; background-color: peru; } .three { width: 100px; height: 100px; background-color: palevioletred; } .four { width: 100px; height: 100px; background-color: yellow; } </style> </head> <body> <div id="main"> <div class="one"></div> <div class="two"></div> <div class="three"></div> <div class="four"></div> </div> </body> </html>
 1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。 |
标签： #flex布局均匀分布 #ampltheadampgt
