伸缩盒（Flexble Box）——flex-grow
flex-grow：扩展比率
flex-grow也是写在子元素里面的，
flex-grow和flex-shrink的区别：
flex-grow是用剩余的容器空间来平均分的
flex-shrink是将全部的容器空间，平均之后，再按照一定的比率分，有些子元素盒子没有设置flex-shrink属性，就默认其占一份
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box {
width: 1400px;
height: 700px;
border: 1px solid firebrick;
display: flex;
}
.box>div {
width: 200px;
height: 200px;
background-color: firebrick;
border: 1px solid #F5DEB3;
}
/* 剩余的400px分成5份，每份80px */
.box>div:nth-of-type(1) {
/* 240px+200px=440px */
flex-grow: 3;
}
.box>div:nth-of-type(2) {
/* 160px+200px=360px */
flex-grow: 2;
}
</style>
</head>
<body>
<div class="box">
<!-- 总宽度为1000px，还剩余400px -->
<div></div>
<div></div>
<!-- 以下还是原来的宽度 -->
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
扫一扫
1158
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
