CSS flex-shrink用法及代碼示例

flex-shrink屬性指定與該容器內的其他項目相比，該項目將收縮多少。與放置在同一容器內的其他元素相比，它定義了元素收縮的能力。

注意：如果容器中的物料不是柔性物料，則flex-shrink屬性將不會影響該物料。

用法:

flex-shrink:number| initial| inherit;

屬性值：

number:一個數字，用於定義商品與其他靈活商品相比的收縮方式。
initial:它將值設置為默認值。
inherit:它從其父元素繼承屬性。

例：在這裏，我們將看到一個容器中有5個div，我們將在第二個div上應用flex-shrink，與其他4個div相比，該div會縮小。我們可以將flex-shrink應用於同一容器中的任何文檔，並且該div會比其他div的寬度縮小；相對於該容器中的其他項目，flex-shrink會將該div縮小。

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        CSS | flex-shrink Property 
    </title> 
    <style> 
        #main { 
            width:450px; 
            height:200px; 
            border:1px solid black; 
            display:-webkit-flex; 
            display:flex; 
            color:white; 
        } 
          
        h1 { 
            color:#009900; 
            font-size:42px; 
            margin-left:50px; 
        } 
          
        h3 { 
            margin-top:-20px; 
            margin-left:50px; 
        } 
          
        #main div { 
            flex-grow:1; 
            flex-shrink:1; 
            flex-basis:100px; 
        } 
          
        <!-- shrinking the 2nd div compare to others -->
        #main div:nth-of-type(2) { 
            flex-shrink:4; 
        } 
    </style> 
</head> 
  
<body> 
    <h1>GeeksforGeeks</h1> 
  
    <h3>The flex-shrink:number</h3> 
  
    <!-- Making 5 divs in main -->
    <div id="main"> 
        <div style="background-color:#009900;"> 
            <p> 
                A number specifying how much the item  
              will shrink relative to the rest of the  
              flexible items. 
            </p> 
        </div> 
  
        <div style="background-color:#00cc99;"> 
            <p> Default value is 1</p> 
        </div> 
  
        <div style="background-color:#0066ff;"> 
            <p> 
              Initial Sets this property to  
              its default value 
            </p> 
        </div> 
  
        <div style="background-color:#66ffff;;"></div> 
  
        <div style="background-color:#660066;"> 
            <p> 
              Inherits this property from 
              its parent element 
            </p> 
        </div> 
    </div> 
</body> 
  
</html>

輸出：

支持的瀏覽器：CSS |下麵列出了flex-shrink屬性：

穀歌瀏覽器29.0
Internet Explorer 11.0
Mozila Firefox 28.0
Opera 17.0
Safari 9.0

相關用法

注：本文由純淨天空篩選整理自Sabya_Samadder大神的英文原創作品 CSS | flex-shrink Property。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。