1.了解Flex布局
在开始解析flex-grow、flex-shrink、flex-basis三个属性之前，需要先了解什么是Flex布局。Flex布局（Flexbox）是一种新的布局模式，它可以让我们更方便地实现对齐、间隔、布局等效果，尤其是对于响应式布局更加方便。Flex布局可以实现任何一种布局效果，非常强大，现在成为了很多布局中不可或缺的一种方式。
Flex布局的核心思想是“让容器有能力让子元素动态地伸缩”，如果你希望能在开发中使用更加简便、方便的布局方式，那么Flex布局将是你的不二选择。
现在我们来通过一个例子来了解Flex布局的基本用法：
.container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
在CSS中设置display: flex即可开启Flex布局，同时还要定义Flex容器内各子元素的排列方式，常用的属性有flex-direction、justify-content和align-items三个。
1.1 flex-direction
在Flex容器中通过设置flex-direction属性来确定项目的排列方向，默认值是row（水平方向），其它值还包括column（垂直方向）、row-reverse和column-reverse。
.container {
display: flex;
flex-direction: row; /* 水平方向排列 */
}
.container {
display: flex;
flex-direction: column; /* 垂直方向排列 */
}
1.2 justify-content
在Flex容器中通过设置justify-content属性来确定子元素在主轴上的排列方式，即如何分配它们之间的空间。默认值是flex-start，其它值还包括flex-end、center、space-between、space-around和space-evenly。
.container {
display: flex;
justify-content: center; /* 子元素在容器水平中间 */
}
.container {
display: flex;
justify-content: space-between; /* 子元素平均分配水平间距 */
}
1.3 align-items
在Flex容器中通过设置align-items属性来确定子元素在交叉轴上的排列方式，即如何分配它们之间的空间。默认值是stretch，其它值还包括flex-start、flex-end、center和baseline。
.container {
display: flex;
align-items: center; /* 子元素在容器垂直中间 */
}
.container {
display: flex;
align-items: flex-start; /* 子元素在顶部对齐 */
}
2.介绍Flex布局的三个属性
上面我们了解了Flex布局的基本用法，现在我们进入正题，介绍Flex布局的三个属性：flex-grow、flex-shrink、flex-basis。
2.1 flex-grow
flex-grow属性指定项目的放大比例，默认值为0，即如果存在剩余空间，也不放大。如果该属性值不为0，所有的Flex子项将按照其 flex-grow 值进行放大。
当容器内项目放大时，Flex容器的内部空间和项目所占据的空间也会相应地放大。如果一个flex项的flex-grow值为2，另一个为1，则前者所占据的空间将比后者多两倍。
下面给出一个具体的例子：
.container {
display: flex;
}
.item {
flex-grow: 1;
}
上面代码中，每个 .item 都会平分剩余空间，只要有剩余空间，这些项目就会平分。
2.2 flex-shrink
flex-shrink属性指定项目的缩小比例，默认值为1，即如果空间不足，也不缩小。如果该属性值不为0，所有的Flex子项将按照其 flex-shrink 值进行缩小。
当空间被缩小时，如果一个 flex 项的 flex-shrink 值为2，另一个为1，则前者所占据的空间将减小的比例是后者的两倍。
下面给出一个具体的例子：
.container {
display: flex;
}
.item {
flex-shrink: 2;
}
上面代码中，当空间不足时， .item 会缩小的比其他Flex子项更多，因为它的 flex-shrink 值是2。
2.3 flex-basis
flex-basis属性指定项目在主轴上的初始大小，默认值为auto，即项目的本来大小。
它跟 width 和 height 属性类似，接受同样的值（如px、%等），但是如果为内容设置了宽度和高度值，最终的计算结果可能并不同于使用 flex-basis。
下面给出一个具体的例子：
.container {
display: flex;
}
.item {
flex-basis: 50%;
}
上面代码中，.item 的主轴初始大小为容器宽度的50%。
3.总结
Flex布局是一种新的布局模式，它可以很好地适应不同尺寸和尺寸的屏幕。我们在使用它的时候经常会用到一些属性，其中比较常用的就是flex-grow、flex-shrink和flex-basis了。
总结一下这三个属性的用途，分别是：
flex-grow：指定项目的放大比例，按比例分配剩余空间。
flex-shrink：指定项目的缩小比例，按比例减少空间。
flex-basis：指定项目在主轴上的初始大小，不参与剩余空间计算。
当然，Flex布局还有很多其他的属性和用法，可以根据需求自由选择。Flex布局的使用不仅可以使代码更加简洁，而且使得我们可以在某些情况下摆脱使用浮动元素进行布局的束缚，代码更加灵活。