HTML | DOM 样式 flexWrap 属性

DOM flexGrow 属性用于确定柔性项目是否应该换行。

句法：

• 返回 flexWrap 属性：

  object.style.flexWrap

• 设置 flexWrap 属性：

  object.style.flexWrap = "nowrap|wrap|wrap-reverse|
  initial|inherit"

特性：

• nowrap：它指定灵活的项目不会包装。
• wrap：它指定灵活的项目将在必要时进行包装。
• wrap-reverse：它指定灵活项目将在必要时以相反的顺序包装。
• initial：用于将属性设置为其默认值。
• 继承：用于从父元素继承属性值。

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

示例 1：显示 nowrap 属性

  

    
       HTML | DOM Style flexWrap Property
    

    
  
        
            Geeks 
              
                Press
              
            
        
  
        
          Clicking on the 'Press' button will set the 
          value of the flexWrap property to "nowrap".
        
  
        
            #main {
                width: 150px;
                height: 150px;
                border: 1px solid #c3c3c3;
                display: -webkit-flex;
                -webkit-flex-wrap: wrap;
                display: flex;
                flex-wrap: wrap;
            }
              
            #main div {
                width: 50px;
                height: 50px;
            }
        
  
        
            G
            E
            E
            K
            S
  
        
  
        
            function wrap() {
  
                // SAFARI
                document.getElementById(
                        "main").style.WebkitFlexWrap =
                    "nowrap";
  
                // Other Standard Browsers
                document.getElementById(
                        "main").style.flexWrap =
                    "nowrap";
            }
        
  
    
  

输出：

在点击按钮之前：

点击按钮后：

示例 2：显示 wrap-reverse 属性

  

    
      
        Geeks Press
        
      
  
  
   Clicking on the 'Press' button will set the 
   value of the flexWrap property to "wrap-reverse".
  
    
        #main {
            width: 150px;
            height: 150px;
            border: 1px solid #c3c3c3;
            display: -webkit-flex;
            -webkit-flex-wrap: wrap;
            display: flex;
            flex-wrap: wrap;
        }
          
        #main div {
            width: 50px;
            height: 50px;
        }
    
  
    
        G
        E
        E
        K
        S
  
    
  
    
        function wrap() {
            
            // SAFARI
            document.getElementById(
              "main").style.WebkitFlexWrap =
              "nowrap";
            
            // Other Standard Browsers
            document.getElementById(
              "main").style.flexWrap = 
              "wrap-reverse";
        }
    
  

  

输出：

在点击按钮之前：

点击按钮后：

示例 3：显示初始属性

  

    
        HTML | DOM Style flexWrap Property
    

  

  
    
        Geeks Press
        
    
  
    Clicking on the 'Press' button will set the 
    value of the flexWrap property to "initial".
  
    
        #main {
            width: 150px;
            height: 150px;
            border: 1px solid #c3c3c3;
            display: -webkit-flex;
            -webkit-flex-wrap: wrap;
            display: flex;
            flex-wrap: wrap;
        }
          
        #main div {
            width: 50px;
            height: 50px;
        }
    
  
    
        G
        E
        E
        K
        S
  
    
  
    
        function wrap() {
  
            // SAFARI
            document.getElementById(
                    "main").style.WebkitFlexWrap =
                "nowrap";
  
            // Other Standard Browsers
            document.getElementById(
                    "main").style.flexWrap =
                "initial";
        }
    
  

  

输出：

在点击按钮之前：

点击按钮后：

示例 4：显示继承属性

  

    
      
        Geeks Press
        
       
  
  
   Clicking on the 'Press' button will set
     the value of the flexWrap property to "inherit".
  
    
        #main {
            width: 150px;
            height: 150px;
            border: 1px solid #c3c3c3;
            display: -webkit-flex;
            -webkit-flex-wrap: wrap;
            display: flex;
            flex-wrap: wrap;
        }
          
        #main div {
            width: 50px;
            height: 50px;
        }
    
  
    
        G
        E
        E
        K
        S
  
    
  
    
        function wrap() {
            
            // SAFARI
            document.getElementById(
              "main").style.WebkitFlexWrap = 
              "nowrap";
            
            // Other Standard Browsers
            document.getElementById(
              "main").style.flexWrap =
              "inherit";
        }
    
  

  

输出：

在点击按钮之前：

点击按钮后：

浏览器支持：列出的浏览器支持DOM flexWrap属性：

• 谷歌浏览器
• 火狐
• 浏览器 11.0
• 歌剧
• Safari 6.1