当前位置: 首页>>代码示例 >>用法及示例精选 >>正文


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。非经特殊声明,原始代码版权归原作者所有,本译文未经允许或授权,请勿转载或复制。