HTML | DOM 样式 flexDirection 属性

DOM Style flexDirection属性用于设置或返回柔性项的主轴方向。

句法：

• 它返回 flexDirection 属性

  object.style.flexDirection

• 它用于设置 flexDirection 属性

  object.style.flexDirection = "row | row-reverse | column | 
  column-reverse | initial | inherit"

属性值：

Value	Description
row	This is used to display the flexible items horizontally as a row.
row-reverse	This is same as a row, but in reverse order.
column	This is used to display the flexible items vertically, as a column.
column-reverse	This is same as a column, but in reverse order.
initial	This is used to set this property to its default value.
inherit	This inherits the property from its parent.

示例 1：使用行值。

    
        DOM Style flexDirection property
    
    
        .main {
            width: 500px;
            height: 300px;
            border: 1px solid;
            display: flex;
            flex-direction: column;
        }
          
        .main div {
            width: 100px;
            height: 50px;
            font-size: 2rem;
            text-align: center;
        }
    

  

    
      GeeksforGeeks
    
    
      DOM Style flexDirection
    
  
    
        
          The
        
  
        
          Geeks
        
  
        
          For
        
  
        
          Geeks
        
  
        
          Portal
        
    
  
    
        Change flexDirection
    
  
    
        function changeFlexDirection() {
            document.querySelector(
                '.main').style.flexDirection = "row";
        }
    
  

  

输出：

点击按钮前：

点击按钮后：

示例 2：使用行反转值。

  

    
        DOM Style flexDirection property
    
  
    
        .main {
            width: 500px;
            height: 300px;
            border: 1px solid;
            display: flex;
            flex-direction: column;
        }
          
        .main div {
            width: 100px;
            height: 50px;
            font-size: 2rem;
            text-align: center;
        }
    

  

    
      GeeksforGeeks
  
    
      DOM Style flexDirection
  
  
    
        
          The
        
  
        
          Geeks
        
  
        
          For
        
  
        
          Geeks
        
  
        
          Portal
        
    
  
    
        Change flexDirection
    
  
    
        function changeFlexDirection() {
            document.querySelector(
                    '.main').style.flexDirection =
                "row-reverse";
        }
    
  

  

输出：

点击按钮前：

点击按钮后：

示例 3：使用列值。

  

    
        DOM Style flexDirection property
    
  
    
        .main {
            width: 500px;
            height: 300px;
            border: 1px solid;
            display: flex;
        }
          
        .main div {
            width: 100px;
            height: 50px;
            font-size: 2rem;
            text-align: center;
        }
    

  

    GeeksforGeeks
    DOM Style flexDirection
  
    
        
          The
        
  
        
          Geeks
        
  
        
          For
        
  
        
          Geeks
        
  
        
          Portal
        
    
  
    
        Change flexDirection
    
  
    
        function changeFlexDirection() {
            document.querySelector(
                '.main').style.flexDirection = "column";
        }
    
  

  

输出：

点击按钮前：

点击按钮后：

示例 4：使用 column-reverse 值。

  

    
        DOM Style flexDirection property
    
  
    
        .main {
            width: 500px;
            height: 300px;
            border: 1px solid;
            display: flex;
        }
          
        .main div {
            width: 100px;
            height: 50px;
            font-size: 2rem;
            text-align: center;
        }
    

  

    
      GeeksforGeeks
  
    
      DOM Style flexDirection
  
  
    
        
          The
        
  
        
          Geeks
        
  
        
          For
        
  
        
          Geeks
        
  
        
          Portal
        
    
  
    
        Change flexDirection
    
  
    
        function changeFlexDirection() {
            document.querySelector(
                    '.main').style.flexDirection =
                "column-reverse";
        }
    
  

  

输出：

点击按钮前：

点击按钮后：

示例 5：使用初始值。

  

    
        DOM Style flexDirection property
    
  
    
        .main {
            width: 500px;
            height: 300px;
            border: 1px solid;
            display: flex;
            flex-direction: column;
        }
          
        .main div {
            width: 100px;
            height: 50px;
            font-size: 2rem;
            text-align: center;
        }
    

  

    
      GeeksforGeeks
  
    
      DOM Style flexDirection
  
  
    
        
          The
        
  
        
          Geeks
        
  
        
          For
        
  
        
          Geeks
        
  
        
          Portal
        
    
  
    
        Change flexDirection
    
  
    
        function changeFlexDirection() {
            document.querySelector(
                    '.main').style.flexDirection =
                "initial";
        }
    
  

  

输出：

点击按钮前：

点击按钮后：

示例 6：使用继承值。

  DOM Style flexDirection property
  
  
  
    
        #parent {
            flex-direction: column-reverse;
        }
          
        .main {
            width: 500px;
            height: 300px;
            border: 1px solid;
            display: flex;
        }
          
        .main div {
            width: 100px;
            height: 50px;
            font-size: 2rem;
            text-align: center;
        }
    
  

  

    
      GeeksforGeeks
  
    
      DOM Style flexDirection
  
    
        
            The
            
            Geeks
            
            For
            
            Geeks
            
            Portal
            
        
    
    
      Change flexDirection
  
  
    
        function changeFlexDirection() {
            document.querySelector(
              '.main').style.flexDirection =
              "inherit";
        }
    
  

  

输出：

点击按钮前：

点击按钮后：

支持的浏览器： flexDirection属性支持的浏览器如下：

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