我们都知道，任何一个盒子都可以进行flex布局，他可以作用于父子盒子之间的布局，但是在这个过程中，剩余的空间是如何计算的，他是如何进行弹性布局的，所以先引入了两个概念，剩余空间和溢出空间
首先介绍三个属性flex-grow、flex-shrink、flex-basis，这三个属性通常用于控制子元素如何分配空间，可以简写为flex，默认值为flex：0 1 auto，即flex-grow: 0, flex-shrink: 0, flex-basis: auto
1、flex-grow
该属性定义了子元素在容器中分配剩余空间的能力。它的值是一个无单位的数字，表示子元素相对于其他子元素的增长比例。默认值为 0，表示不增长。接下来让我们通过代码来看一下它的计算逻辑
<style>
.container {
width: 400px;
height: 100px;
display: flex;
border: 1px solid #000;
}
.one {
width: 100px;
height: 100px;
background-color: red;
}
.two {
width: 100px;
height: 100px;
background-color: blue;
}
.three {
width: 100px;
height: 100px;
background-color: green;
}
</style>
<body>
<div class="container">
<div class="one">1-100px</div>
<div class="two">2-100px</div>
<div class="three">3-100px</div>
</div>
</body>
可以看到，效果如图所示，空白部分就是剩余的空间，那么子元素如何瓜分剩余的空间，这就需要用到flex-grow属性，我们需要在对应的子项中添加该属性，并且配置所需份数，修改CSS样式如下
.one {
width: 100px;
height: 100px;
background-color: red;
flex-grow: 1;
}
.two {
width: 100px;
height: 100px;
background-color: blue;
flex-grow: 1;
}
.three {
width: 100px;
height: 100px;
background-color: green;
flex-grow: 3;
}
接下来的100px将会被分为五份，第一第二个盒子占一份，第三个盒子占三分，最终三个盒子的宽度为120px、120px、160px，效果如图所示
可以发现，flex-grow的计算逻辑是，将剩余空间除以所有flex-grow属性之和，然后按照比例分给带有该属性的盒子
2、flex-shrink
该属性定义了子元素在容器空间不足时的收缩能力。它的值也是一个无单位的数字，表示子元素相对于其他子元素的收缩比例。默认值为 1，表示可以收缩。接下来让我们通过代码来看一下它的计算逻辑
<style>
.container {
width: 300px;
height: 100px;
display: flex;
border: 1px solid #000;
}
.one {
width: 200px;
height: 100px;
background-color: red;
}
.two {
width: 100px;
height: 100px;
background-color: blue;
}
.three {
width: 100px;
height: 100px;
background-color: green;
}
</style>
<body>
<div class="container">
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
</div>
</body>
可以看到，当空间不足的时候，会默认将不足的空间，也就是100px平均分摊给所有的盒子，上述三个盒子的宽度就变为了150px、75px、75px。如果我们希望第一个盒子不进行等比例缩小，其余盒子进行分摊，这个时候就需要用到flex-shrink属性来进行配置。修改css代码如下
.container {
width: 300px;
height: 100px;
display: flex;
border: 1px solid #000;
}
.one {
width: 200px;
height: 100px;
background-color: red;
flex-shrink: 0;
}
.two {
width: 100px;
height: 100px;
background-color: blue;
flex-shrink: 1;
}
.three {
width: 100px;
height: 100px;
background-color: green;
flex-shrink: 1;
}
上述代码表示，第一个盒子不参与缩小，剩下的空间被分为了两份，分给了第二个和第三个盒子，结果如图所示，三个盒子的宽度就变为了200px、50px、50px
综上所述，flex-shrink的计算逻辑就是将不足的空间除以带有flex-shrink的盒子，然后再进行对应的缩小，需要注意的是，该属性默认为1，如果不进行设置，那么默认所有的盒子参与缩小。
3、flex-basis
该属性定义了子元素在分配剩余空间之前的初始大小。它可以是一个长度值（如 px、%、em 等），也可以是 auto。默认值为 auto，表示子元素的大小由内容决定。还是通过代码来看一下它的计算逻辑
<style>
.container {
width: 300px;
height: 100px;
display: flex;
border: 1px solid #000;
}
.one {
width: 100px;
height: 100px;
background-color: red;
}
.two {
flex-basis: 100px;
height: 100px;
background-color: blue;
}
.three {
flex-grow: 1;
height: 100px;
background-color: green;
}
</style>
<body>
<div class="container">
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
</div>
</body>
可以看到，第二个盒子初始化的宽度为100px，第三个盒子设置了flex-grow，撑满了剩余的空间，三个盒子的宽度分别为100px、100px、100px。但是涉及到宽度定义，我们常用的还有max-width相关的，它们之间的优先级是如何的呢？我们再来看一下，给第二个盒子添加一行min-width：150px，结果如下所示
由此可以得出，max-width（min-width）的优先级是高于flex-basis属性的，优先级关系如下：
max-width（min-width）＞ flex-basis ＞ width
4、应用场景
一个最常见的应用场景就是，当我们进行整体的页面布局时，大部分为header、container、footer，当container高度不够，不足以将footer永久置于底部时，我们就可以使用flex-grow属性设置container，以此来撑开内容部分
5、总结
- flex-grow：默认值为0，可以用来撑满剩余的空间，给多个子项添加，将会根据比例对剩余的空间进行平分
- flex-shrink：默认值为1，当空间不足的时候，每个子项会根据比例缩小，如果不希望某个属性缩小，可以给其设置设置flex-shrink：0；
- flex-basis：默认值为auto，可以用来设置初始值的大小，其优先级低于max-width（min-width），高于width
- flex的默认值为：0 1 auto，是flex-grow、flex-shrink、flex-basis的简写属性
