flex縮放

flex-grow:：當父控件還有剩余空間的時候，是否進行放大(grow)，其中數值代表的是放大比例，值為0的時候表示不放大；

flex-shrink：當父控件空間不夠的時候，是否進行縮小(shrink)，其中數值代表的是縮小比例，值為0的時候表示不縮小；

flex-basis：表示在flex items 被放入flex容器之前的大小，也就是items的理想或者假設大小，但是並不是其真實大小，其真實大小取決於flex容器的寬度、flex items的min-width、max-width等其他樣式

• 當flex-basis和width屬性同時存在時，width屬性不生效，flex item的寬度為flex-basis設置的寬度；
• flex items寬度的應用准則：flex-basis (受制於 max|min-width)  優先級大於 width 優先級大於 content；

• .flex-item{
        flex-basis: 300px;   // 失效
        max-width: 100px;   
  }
  .item1{
        background: #66efab;
  }

 

需求：希望底部的內容一直在底部，只有當中間內容多到屏幕底部的時候，底部的內容才自動移出屏幕。大概就是下面這個效果，當綠色的內容多到黃色區域的時候黃色區域自動移動出屏幕：

解決辦法：3個子view套一個父view，父view設置一個min-height:100%; display:flex; flex-direction:column;，中間的view設置flex:1;

flex是 flex-grow，flex-shrink，flex-basis的縮寫

flex的默認屬性是0 1 auto，【父控件有剩余控件也不放大，父控件空間不足按1縮小，保持本身的空間大小】；

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

當 flex:none;的值為 0 0 auto；

當 flex:auto;的值為 1 1 auto；

當 flex 取值為一個非負數字，則該數字為 flex-grow 值，flex-shrink 取 1，flex-basis 取 0%；

當 flex 取值為一個長度或百分比，則視為 flex-basis 值，flex-grow 取 1，flex-shrink 取 1；

當 flex 取值為兩個非負數字，則分別視為 flex-grow 和 flex-shrink 的值，flex-basis 取 0%；

當 flex 取值為一個非負數字和一個長度或百分比，則分別視為 flex-grow 和 flex-basis 的值，flex-shrink 取 1；

 

 

 

 

 

原文：https://www.douban.com/note/717223803/

https://www.jianshu.com/p/57a94430dcbe