• 

      

      2. <span id="z4nqb"></span>
      


      
	
      
		
      flex-shrink
      
		
		
	
      

      

      
	
      
		
      語法：
      
		
      
			
      flex-shrink：<number>
      
			
      默認(rèn)值：1
      
			
      適用于：flex子項
      
			
      繼承性：無
      
			
      動畫性：是
      
			
      計算值：指定值
      
		
      
	
      
	
      
		
      取值：
      
		
      
			
      
				
      <number>：
      
				
      用數(shù)值來定義收縮比率。不允許負(fù)值
      
			
      
		
      
	
      
	
      
		
      說明：
      
		
      
			設(shè)置或檢索彈性盒的收縮比率。
			
        
				
      • 根據(jù)彈性盒子元素所設(shè)置的收縮因子作為比率來收縮空間。
        • 
				
      • 
					示例：a,b,c將按照1:1:3的比率來收縮空間
					
        
						
        HTML Code：
        
						
        <ul class="flex">
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ul>

.flex{display:flex;width:400px;margin:0;padding:0;list-style:none;}
.flex li{width:200px;}
.flex li:nth-child(3){flex-shrink:3;}
        
						
        
							
        flex-shrink的默認(rèn)值為1，如果沒有顯示定義該屬性，將會自動按照默認(rèn)值1在所有因子相加之后計算比率來進(jìn)行空間收縮。
        
							
        本例中c顯式的定義了flex-shrink，a,b沒有顯式定義，但將根據(jù)默認(rèn)值1來計算，可以看到總共將剩余空間分成了5份，其中a占1份，b占1份，c占3分，即1:1:3
        
							
        我們可以看到父容器定義為400px，子項被定義為200px，相加之后即為600px，超出父容器200px。那么這么超出的200px需要被a,b,c消化
        
							
        通過收縮因子，所以加權(quán)綜合可得200*1+200*1+200*3=1000px；
        
						于是我們可以計算a,b,c將被移除的溢出量是多少：
        
						a被移除溢出量：(200*1/1000)*200，即約等于40px
        
						b被移除溢出量：(200*1/1000)*200，即約等于40px
        
						c被移除溢出量：(200*3/1000)*200，即約等于120px
        
						最后a,b,c的實際寬度分別為：200-40=160px, 200-40=160px, 200-120=80px
        
						
        
					
        
				
        • 
				
      • 對應(yīng)的腳本特性為flexGrow。
        • 
			
      
		
      
	
      
	
      
		
      兼容性：
      
		
      
			
        
				
      • 淺綠 = 支持
        • 
				
      • 紅色 = 不支持
        • 
				
      • 粉色 = 部分支持
        • 
			
      
			
      
				
					
      
						Values
						IE
						Firefox
						Chrome
						Safari
						Opera
						iOS Safari
						Android Browser
						Android Chrome
					
      
				      
				
					
      
						Basic Support
						6.0-10.0
						2.0-21.0
						4.0-20.0
						6.0
						15.0+-webkit-
						6.0-6.1
						2.1-4.3
						18.0-19.0
					
      
					
      
						11.0+
						22.0+
						21.0+-webkit-
						6.1+-webkit-
						17.0+
						7.0+-webkit-
						4.4+
						20.0+-webkit-
					
      
					
      
						29.0+
						9.0+
						9.0+
						28.0+
					
      
				      
			
      
		
      
	
      
	
      
		
      示例：
      
		
      
			
			
      
		
      
	
      
	
      
		
      本頁最后更新時間：
      
		
      
			2015.7.29
		
      
	
      

      





    3. 

        

        2. <span id="z4nqb"></span>
        
91中文字幕日本乱码
|
麻豆18禁在线看
|
18成人网站在线观看
|
日逼精品|
天天操好逼网
|
特级艺体西西444WWw
|
91无套
|
乱伦免费网站
|
国产精品人妻无码久久久苍井空
|
爱爱中文字幕
|