您当前的位置： 首页 > 学无止境 > CSS3|Html5 网站首页CSS3|Html5
flex布局学习笔记之flex-grow
发布时间：2018-04-10 17:14:14编辑：雪饮阅读（）
在flex布局中,可以设置每个容器的flex-grow属性,该属性可使得容器在父级容器有空余空间的时候自动放大,该属性值默认为0表示不放大。
如下3个div默认情况下应该都是全部浮动于左上角的。而由于第一个div和最后一个div使用了flex-grow，所以中间的div只按原本css的宽高，而左右的div分别将父级剩余空间瓜分。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
body{display:flex;}
#box1{
flex-grow:1;
background:pink;
width:80px;
height:100px;
}
#box2{
background:green;
width:80px;
}
#box3{
flex-grow:1;
background:blue;
width:80px;
height:100px;
}
</style>
</head>
<body>
<div id="box1">第一个盒子</div>
<div id="box2">第二个盒子</div>
<div id="box3">第三个盒子</div>
</body>
</html>
关键字词：flex,grow