CSS | flex-direction 属性

flex-direction 属性是弹性框布局模块的子属性。它建立了灵活项目的主轴。弹性项目的主轴是主轴。它不一定一直是水平的，它基本上取决于 flex-direction 属性。
注意：当元素不是柔性项目时， flex 属性是无用的。
句法：

flex-direction: row|row-reverse|column|column-reverse;

属性值：

• row：与文本方向相同的行排列。flex-direction的默认值为row。它用于指定项目具有正常的文本方向。它使项目在行中遵循正常的文本方向。
  句法：

flex-direction: row; 

• 例子：

html

 

    
    

 

    
GeeksforGeeks
    
The flex-direction:row
    

        
1
        
2
        
3
        
4
        
5
        
6
    

 

html

 

    
    

 

    
GeeksforGeeks
    
The flex-direction:row-reverse
    

        
1
        
2
        
3
        
4
        
5
        
6
    

 

html

 

    
    

 

    
GeeksforGeeks
    
The flex-direction:column-reverse
    

        
1
        
2
        
3
        
4
        
5
        
6
    

 

 

 

    
    

 

    
GeeksforGeeks
    
The flex-direction:row-reverse
    

        
1
        
2
        
3
        
4
        
5
        
6
    

 

• 输出：

• column ：将行排列为与文本方向相同但从上到下的列。它用于指定项目具有正常的从上到下的方向。正如我们在输出中看到的那样，它使项目遵循正常的从上到下的方向。
  句法：

flex-direction:column; 

• 例子：

html

 

    
    

 

    
GeeksforGeeks
    
The flex-direction:column
    

        
1
        
2
        
3
        
4
        
5
        
6
    

 

• 输出：

• column-reverse ：将行排列为与 row-reverse 从下到上相同的列。它用于指定项目具有正常的从下到上的方向。正如我们在输出中看到的那样，它使项目遵循正常的从下到上的方向。
  句法：

flex-direction:column-reverse; 

• 例子：

html

 

    
    

 

    
GeeksforGeeks
    
The flex-direction:column-reverse
    

        
1
        
2
        
3
        
4
        
5
        
6