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- 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