版权声明：本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/weixin_44238688/article/details/86468977
相信大家在做html页面布局的时候都有过一个很脑袋疼的问题，那就是尺寸不平均，尺寸不平均会导致页面的不整齐，今天给大家分析下弹性布局。
弹性布局html布局中是很广泛的一个属性，他可以让你整个页面的布局合理化的分布在平均的位置上，重要的是他可以根据的你的分辨率来改变宽度。这样就不会因为不知道怎么让布局整齐而抓破头了。
html+css代码:
<html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .big-box{ width:100%; height:700px; display: flex; /*这个属性决定了你弹性盒子能否正常运行，所以这个一定要加*/ } .box-1{ order:1; /*这个属性的作用是他在全部盒子中的位置，值越小越往前靠。*/ flex-grow: 1; /*这个属性的值决定了他有多少的分量，比如说我现在这个就是三个中的一份*/ background:#000; border-radius: 20px } .box-2{ order:2; flex-grow:2; background:#666; border-radius: 20px } .box-3{ order:3; flex-grow: 1; background:#222; border-radius: 20px } </style> </head> <body> <div class="big-box"> <div class="box-1"></div> <div class="box-2"></div> <div class="box-3"></div> </div> </body> </html> 效果图:
总结:在用弹性盒子的时候要注意两个个点，一、外面盒子的宽度要注意。二、要在合适的地方使用，不要为了追求整齐而强行套进去。
文章来源: https://blog.csdn.net/weixin_44238688/article/details/86468977