flex-shrink和felx-grow

news/2024/7/7 20:57:02

本文就是简单的介绍下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>