flex布局--flex-grow、flex-shrink、flex-basis

• flex-grow
  flex-grow 只有在 flex 容器中有剩余空间时才会生效。flex 项的 flex-grow 属性指定该 flex 项相对于其他 flex 项将拉伸多少，以填充 flex 容器。默认值为1。当设置为 0 时，该 flex 项将不会被拉伸去填补剩余空间。在这个例子中，两个项的比例是 1:2，意思是在被拉伸时，第一个 flex 项将占用剩余空间的 1/3，而第二个 flex 项将占据剩余空间的2/3。(如果item不定义flex-grow，也不定义宽度，则item宽度由内容决定)

    
    
    
    






    

        
1
        
2
        
3
    
    

上例中，item的宽度即使不定义，item2和item3也会拉升，item1宽度由内容决定

• flex-basis
  flex-basis属性定义了项目占据的主轴空间。浏览器根据这个属性，计算主轴多余空间或不足空间的大小。它的默认值为auto，即项目的本来大小

    
    
    
    

    



    

        
item1
        
item1
    

容器宽度默认充满父元素
flex-grow默认是0（不会拉升填充剩余空间），这样每个item的默认宽度是由内容决定
效果图如下：

设置item的宽度，让其超过容器，由于设置了flex-flow: row wrap;这时候会换行

 .item {
            background-color: pink;
            margin: 10px;
            width: 80%;
        }

如果同时设置了width和flex-basis,以flex-basis为准

  .item {
            background-color: pink;
            margin: 10px;
            width: 80%;
            flex-basis: 100px;
        }

相当于：

  .item {
            background-color: pink;
            margin: 10px;
            width: 100px;
        }

如果flex-basis设置为auto，则item的宽度取width的值

  .item {
            background-color: pink;
            margin: 10px;
            width: 80%;
            flex-basis: auto;
        }

和

 .item {
            background-color: pink;
            margin: 10px;
            width: 80%;
        }

是一个意思

max-width/min-width不会因为flex-basis失效

  .item {
            background-color: pink;
            margin: 10px;
            flex-basis: 800px;
            max-width: 100px;
        }

item的宽度不会大于100px

• flex-shrink
  任何情况下，item都会被container包裹，不会超过，如果container空间不够，item会自动压缩

    
    
    
    




    

        
1
        
2
    

上例中item的宽度会缩小到25px
之所以会自动压缩，是因为flex-shrink的默认值是1，容器宽度不够容纳所有item时，flex-shrink规定了item缩短的比例，默认是平均缩短

• flex-grow、flex-shrink都是优先保证其定义的宽度，有剩余或不够时，把剩余或不够的部分按指定的比例分配
  比如这个

    
    
    



    

        
left
        
center
        
right
    

缩小时，开始左右两侧div固定为400px，逐渐压缩中间的div，中间的div只够容纳其内容，无法再压缩时，再压缩左右两侧div
拉升时，左右两侧从小于400px逐渐拉升到400px后保持400px ，再拉升则剩余的空间都加到中间div上
可以把box的min-width限定为1000px，以使其足够容纳左右各400px的固定长度，这样左右两个div长度就不会变化了，浏览器缩小到不够显示时会出现滚动条

#box {
            min-width: 1000px;
            height: 100px;
            display: flex;
            margin: 10px;
        }

• flex 是 flex-grow、flex-shrink、flex-basis的缩写，
  flex-grow默认值是0，flex-shrink默认值是1，flex-basis是auto（item宽度）
  所以flex 的默认值是 0 1 auto