HTML | DOM 样式 flexShrink 属性

HTML DOM 中的Style flexShrink属性用于设置特定项目如何相对于容器内剩余的灵活项目进行收缩。
句法：

• 它用于返回 flexShrink 属性。

  object.style.flexShrink

• 它用于设置 flexShrink 属性。

  object.style.flexShrink = "number|initial|inherit"

属性值：

• number：用于设置一个数字，该数字指定相对于剩余的灵活项目可收缩多少项目。其默认值为 0。
• 初始：它将 flexShrink 属性设置为其默认值。
• 继承：此属性值从其父元素继承。

示例 1：

  

    
        HTML DOM Style flexShrink Property
    
    
        #Geeks {
            width: 350px;
            height: 100px;
            border: 1px solid #c3c3c3;
            display: flex;
        }
          
        #Geeks div {
            flex-grow: 1;
            flex-shrink: 1;
            flex-basis: 300px;
        }
    

  

    Click the button
    Click Here!
        
    
    
    
        
          GeeksForGeeks1
      
        
          GeeksForGeeks2
      
    
    
    
        function GFG() {
            
            // Safari 6.1+
            document.getElementById(
              "Geeks2").style.WebkitFlexShrink = "5"; 
            
            document.getElementById(
              "Geeks2").style.flexShrink = "5";
        }
    

  

输出：

示例 2：

  

    
    

  

    
The flex-shrink Property
    
    

        

      
        

      
        

      
        

      
        

      
    
    

  

输出：

支持的浏览器： DOM HashChangeEvent 属性支持的浏览器如下：

• 谷歌浏览器 5.0
• 浏览器 8.0
• 火狐 3.6
• 歌剧 10.6
• Safari 5.0