本文就是简单的介绍下flex-shrink和felx-grow的作用和计算方式吧;关于这个介绍也是很多;
flex-shrink
flex-shrink是flex布局中的一种方式,简单来说,就是当布局大小小于容器大小的时候,使用flex-shrink能够按照一定的比例进行压缩。比如有一个500px的容器,里面放了5个120px的子容器,如果不考虑任何布局,5个子容器已经超越了500的大小了。而当我们给父容器添加flex布局的时候,就会排列一行,此时就算超越了容器大小依旧完整的充满容器,这是因为flex-shrink的默认值为1,如果没有显示定义该属性,将会自动按照默认值1在所有因子相加之后计算比率来进行空间收缩。那么我们对个别子容器设置不同的flex-shrink会怎么样呢?如下:
<div id="content">
<div class="box" style="background-color:red;">A</div>
<div class="box" style="background-color:lightblue;">B</div>
<div class="box" style="background-color:yellow;">C</div>
<div class="box1" style="background-color:brown;">D</div>
<div class="box1" style="background-color:lightgreen;">E</div>
</div>
<style>
#content {
display: flex;
width: 500px;
border:2px solid red;
}
#content div {
width: 120px;
border: 3px solid rgba(0,0,0,.2);
}
.box {
flex-shrink: 1;
}
.box1 {
flex-shrink: 2;
}
</style>
我们会发现DE明显变短,并且子容易排列完整填充父容器。那么他们分别缩短了多少呢?
我们看看菜鸟上面如何计算的:
说实话,我看到这里比较懵的,为什么要计算这么麻烦。。。。
我用我的方法吧。。。首先五个子容器不压缩得占用空间600,但是容器只有500,多了100,这多的100就得按照flex-shrink的大小进行平分(要恢复到500的大小,只能每个子容器减去这个大小),那么A容器就是:100/7*1=14.28=14,即A容器就得减去14PX的大小。同理,D,E就是得28px.
felx-grow
felx-grow就和flex-shrink相反,对扩张的比例分配。默认值为0。
<div id="main">
<div style="background-color:coral;"></div>
<div style="background-color:lightblue;"></div>
<div style="background-color:khaki;"></div>
<div style="background-color:pink;"></div>
<div style="background-color:lightgrey;"></div>
</div>
<style>
#main {
width: 350px;
height: 100px;
border: 1px solid #c3c3c3;
display: flex;
}
#main div:nth-of-type(1) {flex-grow: 1;}
#main div:nth-of-type(2) {flex-grow: 3;}
#main div:nth-of-type(3) {flex-grow: 1;}
#main div:nth-of-type(4) {flex-grow: 1;}
#main div:nth-of-type(5) {flex-grow: 1;}
</style>
到了这里,我突然想起一个问题,这个flex-grow我不知道各位用的多不多,但是我一般都是用flex:1这种直接用flex进行分配大小的。那么弹性盒模型中flex-grow 和flex的区别是什么?
3.flex-basis 属性
用处:设置弹性盒元素的初始长度。有兴趣可以了解下,没啥特别的,不过对我个人来说挺冷门的,哈哈哈