今天有个需求希望底部的内容一直在底部，只有当中间内容多到屏幕底部的时候，底部的内容才自动移出屏幕。大概就是下面这个效果，当绿色的内容多到黄色区域的时候黄色区域自动移动出屏幕。
版权归作者所有，任何形式转载请联系作者。
作者：白板凳与黑木头（来自豆瓣）
来源：https://www.douban.com/note/717223803/
想想也简单，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的计算下面两个链接有讲到。
参考：