Tailwind CSS Flex 方向

CSS flexbox 是开发前端的重要功能，CSS 中有四个可用方向，因此在 Tailwind CSS 中，所有属性都以类形式覆盖。它是 CSS flex-direction 属性的替代品，用于快速开发前端。

注意：要激活 flex-direction，您必须在 flex-direction 类之前在元素中包含 flex 类。

弹性方向：

• flex-row
• flex-row-reverse
• flex-col
• flex-col-reverse

下面是每个方向的示例代码和输出：

flex-row：按文本方向排列行。 flex-direction 的默认值是一行。它用于指定项目具有正常的文本方向。它使项目在行中遵循正常的文本方向。

句法：

 Contents... 

例子：

HTML

 
  
 
     
  
     
 
  
 
    

        GeeksforGeeks
    
 
  
    Tailwind CSS flex-row Class 
  
    
 
        
1
 
        
2
 
        
3
 
        
4
 
        
5
 
        
6
 
    
 
 
  

输出：

flex-row-reverse：这个类用于跟随相反的文本方向。正如我们在输出中看到的那样，它使 flex 项目的顺序与文本方向完全相反。

句法：

 Contents... 

例子：

HTML

 
  
 
     
  
     
 
  
 
    

        GeeksforGeeks
    
 
  
    Tailwind CSS flex-row-reverse Class 
  
    
 
        
1
 
        
2
 
        
3
 
        
4
 
        
5
 
        
6
 
    
 
 
  
 

输出：

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

句法：

 Contents... 

例子：

HTML

 
  
 
     
  
     
 
  
 
    

        GeeksforGeeks
    
 
  
    Tailwind CSS flex-col Class 
  
    
 
        
1
 
        
2
 
        
3
 
        
4
 
        
5
 
        
6
 
    
 
 
  
 

输出：

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

句法：

 Contents... 

例子：

HTML

 
  
 
     
  
     
 
  
 
    

        GeeksforGeeks
    
 
  
    Tailwind CSS flex-col-reverse Class 
  
    
 
        
1
 
        
2
 
        
3
 
        
4
 
        
5
 
        
6
 
    
 
 
  
 

输出：