flex:1;的含义

今天有个需求希望底部的内容一直在底部，只有当中间内容多到屏幕底部的时候，底部的内容才自动移出屏幕。大概就是下面这个效果，当绿色的内容多到黄色区域的时候黄色区域自动移动出屏幕。

想想也简单，3个子view套一个父view，设置一个min-height:100%; display:flex; flex-direction:column;中间的view设置flex:1;需求完成，可以喝下午茶了。但是为什么设置flex:1的时候中间的部分就会自动填充父布局的剩余空间？【黑人脸？？】

到网上找了好多资料，其中下面两个参考链接讲的比较清楚，但是第二个(52841087)中的flex-shrink计算方式讲的不对，这个可以参考一下第一个。

我这里也总结了一下：

flex是 flex-grow，flex-shrink，flex-basis的缩写

flex-grow:：当父控件还有剩余空间的时候，是否进行放大(grow)其中数值代表的是放大比例，值为0的时候表示不放大；

flex-shrink：当父控件空间不够的时候，是否进行缩小(shrink)其中数值代表的是与控件大小有关的缩小比例；

flex-basis：当子空间含有这个属性的时候，代表了子空间占主轴的大小，主轴就是flex的主方向row是横向，column是竖向；(这里第一个链接中只说了width，如果flex方向是column也可以是height)；

假设现在有3个view垂直布局，第一个和第三个view不设置flex，中间的view设置flex:1:

默认flex属性是0 1 auto，【父控件有剩余控件也不放大，父控件空间不足按1缩小，保持本身的空间大小】

flex:1;的值是1 1 0%，【父控件有剩余空间占1份放大，父控件空间不足按1缩小，自身的空间大小是0%】

这个时候(最上和最下的空间大小不会超过父控件)父控件还有剩余空间，剩余空间被中间的空间占有flex-grow:1;没有其他控件有放大属性，所以被中间这个控件独占。嗷，所以这么设置一个flex:1;就可以完成需求喝下午茶了，其实这么看只要设置flex-grow:1;在这个情况下也能满足这个需求？是的，在这种情况下，因为不存在超出父控件的情况，这么设置也可以。。。bingo！

其他关于flex-grow，flex-shrink的计算下面两个链接有讲到。

参考：

https://blog.csdn.net/m0_37058714/article/details/80765562

https://blog.csdn.net/qq_26598303/article/details/52841087