今天有個需求希望底部的內容一直在底部，只有當中間內容多到屏幕底部的時候，底部的內容才自動移出屏幕。大概就是下面這個效果，當綠色的內容多到黃色區域的時候黃色區域自動移動出屏幕。
版權歸作者所有，任何形式轉載請聯系作者。
作者：白板凳與黑木頭（來自豆瓣）
來源：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的計算下面兩個鏈接有講到。
參考：