flex-shrink和flex-grow的区别
flex-shrink:当主轴方向显示不下所有项目时,项目是否进行压缩。默认值为1;取正整数,最小值为0,为0时表示不压缩。
那么如何压缩?
简单的思路:把主轴方向不够的部分,按照几个项目的值进行压缩。
实施的代码如下:
<style>
#parent{
width:500px;
height:400px;
border:2px solid #f00;
display:flex;
}
#d1,#d2,#d3{
width:200px;
height:200px;
border:2px solid #f0f;
font:40px jokerman;
}
#d1{
background:#ffa;
flex-shrink:1;
}
#d2{
background:#aff;
flex-shrink:10;
}
#d3{
background:#faf;
flex-shrink:100;
}
</style>
</head>
<body>
<div id="parent">
<div id="d1">1</div>
<div id="d2">2</div>
<div id="d3">3</div>
</div>
</body>
设置一个大的div,里面包含3个小的div,大的div设置的宽度为500px,小的div宽度都设置200px,可以看出,还差100px才能容下小的div,这时需要给小的div进行压缩。给3个小的div设置不同的flex-shrink值,分别为1,10,100.。
id为d1的div最后压缩的值为:1001/(1+10+100)
id为d2的div最后压缩的值为:10010/(1+10+100)
id为d3的div最后压缩的值为:100*100/(1+10+100)
最后可以看出d1压缩最小,d3压缩最大;
最后的效果:
flex-grow:当主轴方向有剩余的空间,项目是否增长,默认值为0,为0时表示不增长。
如何增长?
简单的思路:把主轴剩余的空间,按照几个项目的取值进行分配,和flex-shrink相反。
实施的代码如下:
<style>
#parent{
width:700px;
height:400px;
border:2px solid #f00;
display:flex;
}
#d1,#d2,#d3{
width:200px;
height:200px;
border:2px solid #f0f;
font:40px jokerman;
}
#d1{
background:#ffa;
flex-grow:1;
}
#d2{
background:#aff;
flex-grow:10;
}
#d3{
background:#faf;
flex-grow:100;
}
</style>
</head>
<body>
<div id="parent">
<div id="d1">1</div>
<div id="d2">2</div>
<div id="d3">3</div>
</div>
</body>
基本和flex-shrink案例一样,只是改了大的div的宽度为700px,小的div宽度都设置200px,可以看出,多出了100px,这时需要给小的div进行增长。给3个小的div设置不同的flex-grow值,分别为1,10,100.。
id为d1的div最后增长的值为:1001/(1+10+100)
id为d2的div最后增长的值为:10010/(1+10+100)
id为d3的div最后增长的值为:100*100/(1+10+100)
最后可以看出d1增长最小,d3增长最大;
最后效果: