HTML | DOM 样式 flexGrow 属性

HTML DOM样式的 flexGrow 属性用作衡量一个项目相对于同一容器内的其余灵活项目增长多少的度量。

句法：

• 返回 flexGrow 属性：

  object.style.flexGrow

• 设置 flexGrow 属性：

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

特性：

• number：它指定数量的数量，该数量决定了项目相对于其余灵活项目的增长量。
• 初始：它将 flexGrow 属性设置为其默认值。
• 继承：它从其父元素继承属性值。

返回值：
它返回一个字符串，表示元素的 flex-grow 属性。

示例 1：项目相对于同一容器内的其余灵活项目增长。

    
       HTML | DOM Style flexGrow Property
    
    
        #main {
            width: 550px;
            height: 70px;
            border: 1px solid #c3c3c3;
            display: -webkit-flex;
            display: flex;
        }
          
        #main div:nth-of-type(1) {
            -webkit-flex-grow: 1;
        }
          
        #main div:nth-of-type(2) {
            -webkit-flex-grow: 1;
        }
          
        #main div:nth-of-type(1) {
            flex-grow: 1;
        }
          
        #main div:nth-of-type(2) {
            flex-grow: 1;
        }
    


    
      
        Geeks Press
        
       
    
  
    
      Clicking on the 'Press' button 
      will showcase the'FlexGrow Property'.
    
    
        
      
        
      
    
  
    
        function flex() {
  
            // Access element and grow the item
            document.getElementById(
              "gfg").style.flexGrow = 
              "1000";
        }
    
  

  

输出：

在点击按钮之前：

点击按钮后：

示例 2：当“nth-of-type”为 4 时项目增长。

    
       HTML | DOM Style flexGrow Property
    
    
        #main {
            width: 550px;
            height: 70px;
            border: 1px solid #c3c3c3;
            display: -webkit-flex;
            display: flex;
        }
          
        
        <!-- SAFARI -->
        #main div:nth-of-type(1) {
            -webkit-flex-grow: 1;
        }
          
        #main div:nth-of-type(2) {
            -webkit-flex-grow: 1;
        }
          
        #main div:nth-of-type(3) {
            -webkit-flex-grow: 1;
        }
          
        #main div:nth-of-type(4) {
            -webkit-flex-grow: 1;
        }
        
        
        
        <!-- Chrome, Firefox, Opera, Edge -->  
        #main div:nth-of-type(1) {
            flex-grow: 1;
        }
          
        #main div:nth-of-type(2) {
            flex-grow: 1;
        }
          
        #main div:nth-of-type(3) {
            flex-grow: 1;
        }
          
        #main div:nth-of-type(4) {
            flex-grow: 1;
        }
    


    
      
        Geeks Press
        
       
    
  
    
     Clicking on the 'Press' button
     will showcase the'FlexGrow Property'.
    
    
        
        
        
        
    
  
    
        function flex() {
            
            // SAFARI.
            document.getElementById(
              "gfg").style.WebkitFlexGrow = "8";
            document.getElementById(
              "gfg").style.flexGrow = "8";
            
            //  OTHERS.
            document.getElementById(
              "gfgg").style.WebkitFlexGrow = "8";
            document.getElementById(
              "gfgg").style.flexGrow = "8";
        }
    
  

  

输出：

在点击按钮之前：

点击按钮后：

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

• 谷歌浏览器
• IE浏览器
• 火狐
• 歌剧
• 苹果浏览器