前端学习记录003_flex-grow与flex-shrink

一、flex-grow的计算方式

注释了flex-basis属性

flex-basis:0;

    *{
            margin: 0;
            padding: 0;
        }

        ul{
            width: 600px;
            border: 10px yellow solid;
            /* 将ul设置为弹性容器 */
            display: flex;
            /* 设置弹性容器的排列方式 */
            margin: 50px;
            flex-direction: row;
        }

        li{
            background-color: #bbffaa;
            list-style: none;
            width: 100px;
            height: 100px;
            line-height: 100px;
            text-align: center;
            font-size: 50px;
        }

        /* 
        	 		 flex-grow的初始值为0:
					 flex-basis没有使用auto以外的属性赋值时，flex-basis默认使用width
					   可用空间 = (容器大小 - 所有相邻项目flex-basis的总和)
					   				600px-300px = 300
					   可扩展空间 = (可用空间/所有相邻项目flex-grow的总和)
					   				300 / 6 = 50
					   每项伸缩大小 = (伸缩基准值 + (可扩展空间 x flex-grow值))
					   				
									50 + 50*3 = 250
									50 + 50*2 = 150
									50 + 50*1 = 100
							
									
					 flex-grow的初始值为0:
					 flex-basis没有使用auto以外的属性赋值时，flex-basis使用0
					   可用空间 = (容器大小 - 所有相邻项目flex-basis的总和)
					   				600 - 6*0  = 600
					   可扩展空间 = (可用空间/所有相邻项目flex-grow的总和)
					   				600 / 6 = 100
					   每项伸缩大小 = (伸缩基准值 + (可扩展空间 x flex-grow值))
									0 + 100*1 = 100
									0 + 100*2 = 200
									0 + 100*3 = 300
        */
        .first li:nth-child(1){
        	flex-basis: 0;
            flex-grow: 1;
        }

        .first li:nth-child(2){
        	flex-basis: 0;
            background-color: pink;
            flex-grow: 2;
        }

        .first li:nth-child(3){
        	flex-basis: 0;
            background-color: orange;
            flex-grow: 3;
        }

        /*======== second ==========*/
        .second li:nth-child(1){
            /* flex-grow: 0; */
        }

        .second li:nth-child(2){
            background-color: pink;
            /* flex-grow: 0; */
        }

        .second li:nth-child(3){
            background-color: orange;
            /* flex-grow: 0; */
        }

二、flex-shrink的计算方式

         ul{
            width: 600px;
            border: 10px yellow solid;
            /* 将ul设置为弹性容器 */
            display: flex;
            /* 设置弹性容器的排列方式 */
            margin: 50px;
            flex-direction: row;
        }

        li{
            background-color: #bbffaa;
            list-style: none;
            width: 300px;
            height: 100px;
            line-height: 100px;
            text-align: center;
            font-size: 50px;
        }

        /* 
            flex-shrink初始值为1
            每个子元素的原始宽度为300px。
            子元素总宽度为900px,因此布局完子元素后超出父元素的宽度为300px=(300px*3-600px)
            现在从左至右设置flex-grow的值依次为1，2，3，此时剩余部分空间
            按照6(1+2+3)份分割，每份等于300/6=50
            第一个元素的宽度为：300-50*1=250
            第二个元素的宽度为：300-50*2=200
            第三个元素的宽度为：300-50*3=150
			
			说明：基准值就是flex-basis的值，默认跟元素的宽度相等		
             1.计算收缩因子与基准值乘的总和  
				   		600 + 300*2 = 1200
				   2.计算收缩因数
				              收缩因数=（项目的收缩因子*项目基准值）/第一步计算总和   
				              1*600 / 1200 = 1/2
				              1*300 / 1200 = 1/4                            

				   3.移除空间的计算
				              移除空间= 项目收缩因数 x 负溢出的空间 
				              1/2*600 = 300
				              1/4*600 = 150

				              600 - 300 = 300
                              300 - 150 = 150
        */
        .first li:nth-child(1){
            width: 600px;
        }

        .first li:nth-child(2){
            background-color: pink;
        }

        .first li:nth-child(3){
            background-color: orange;
        }

        /*======== second ==========*/
        .second li:nth-child(1){
            flex-shrink: 0;
        }

        .second li:nth-child(2){
            background-color: pink;
            flex-shrink: 0;
        }

        .second li:nth-child(3){
            background-color: orange;
            flex-shrink: 0;
        }

三、flex-grow与flex-shrink的区别

子元素超出父元素时就是flex-shrink生效，flex-grow不生效；子元素未超父元素时就是flex-grow生效，flex-shrink不生效。