【每天一个知识点】flex-grow、flex-shrink、flex-basis详解

首先是 flex-basis ，其实就是width，只不过他和width放一起时优先级高于width。

//这里的宽度会采用flex-basis
 .inner{
            width:200px;
            height:100px;
            flex-basis:300px;
            background:pink;
     }

接着是flex-grow，如果子盒子总宽度比父盒子小，多余的部分可以通过grow来自适应分配,grow属性默认都为0，也就是多出部分不分配。

		.father{
			width:600px;
			height:100px;
			display:flex;
		}
		.son1{
		     flex-basis:100px;
		     height:100px;
		     flex-grow:2;
		 }
        .son2{
            flex-basis:200px;
            height:100px;
		    flex-grow:1;
        }

如上代码，最后son1宽度是 原有宽度加分配宽度：100+200，son2宽度是 原有宽度加分配宽度 200+100。

最后是flexshrink，如果子盒子总宽度比父盒子大，超出的部分按比例缩小，shrink的默认值为1，当父元素的宽度小于所有子元素的宽度的和时，子元素的宽度统一都会减小。所以有时候我们会发现，盒子用了flex后子盒子的宽度跟自己设置的宽度不一样，其实就是因为超出父盒子都缩小了，这时候往往会设置flex-shrink：0；来锁死某个子盒子的宽度。

.box{
            display: flex;
            flex-direction: row;
            margin:100px auto;
            width:400px;
            height:200px;
            border:1px solid red;
 
        }
        .inner{
            flex-basis:200px;
            height:100px;
            background:black;
             flex-shrink:0;
        }
        .inner1{
            flex-basis:300px;
            height:100px;
            background:blue;
            flex-shrink:0;
 
        }

总结：除了flex-basis不怎么使用（可被width替代），shrink和grow都是有很不错的使用场景去帮我们做自适应布局。