HTML之弹性布局
相信大家在做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>效果图:
弹性盒子
总结:在用弹性盒子的时候要注意两个个点，一、外面盒子的宽度要注意。二、要在合适的地方使用，不要为了追求整齐而强行套进去。
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2019-01-14 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读