Tailwind CSS 对齐内容

此类接受 Tailwind CSS 中的大量值。它是 CSS Align Content 属性的替代方案。此类用于更改flex-wrap属性的行为。它对齐弯曲线。它用于指定灵活容器内的行之间的对齐方式。这个属性定义了每个 flex 行如何在 flexbox 中对齐，并且仅在flex-wrap: wrap被应用时才适用，即如果存在多行 flexbox 项目。

对齐内容类：

• 内容中心
• 内容开始
• 内容端
• 内容之间
• 内容环绕
• 内容均匀

content-center：该类用于在 flex 容器的中心放置线条。

句法：

...

例子：

输出：

content-start：此类用于在 flex 容器的开头放置行。

句法：

...

例子：

HTML

 
 
     
 
  
 
    

        GeeksforGeeks
    
 
    Tailwind CSS Align Content Class 
    
 
        
1
 
        
2
 
        
3
 
        
4
 
        
5
 
        
6
 
    
 
 
  

输出：

content-end：此类用于在 flex 容器的末尾放置线条。

句法：

...

例子：

HTML

 
 
     
 
  
 
    

        GeeksforGeeks
    
 
    Tailwind CSS Align Content Class 
    
 
        
1
 
        
2
 
        
3
 
        
4
 
        
5
 
        
6
 
    
 
 
  

输出：

content-between：此类用于在容器中分配行，以使每行之间的空间相等。

句法：

...

例子：

HTML

 
 
     
 
  
 
    

        GeeksforGeeks
    
 
    Tailwind CSS Align Content Class 
    
 
        
1
 
        
2
 
        
3
 
        
4
 
        
5
 
        
6
 
    
 
 
  

输出：

content-around：此类用于在容器中分配行，以便每行周围有相等的空间。

句法：

...

例子：

HTML

 
 
     
 
  
 
    

        GeeksforGeeks
    
 
    Tailwind CSS Align Content Class 
    
 
        
1
 
        
2
 
        
3
 
        
4
 
        
5
 
        
6
 
    
 
 
  

输出：

content-evenly：此类用于在容器中分配行，以便每个项目周围有相等的空间，但也考虑到使用content-around类时每个项目之间通常会看到的空间加倍。

句法：

...

例子：

HTML

 
 
     
 
  
 
    

        GeeksforGeeks
    
 
    Tailwind CSS Align Content Class 
    
 
        
1
 
        
2
 
        
3
 
        
4
 
        
5
 
        
6
 
    
 
 
  

输出：