Tailwind CSS 对齐内容

这个类在 Tailwind CSS 中接受两个值。它是 CSS justify-content 属性的替代品。该类用于描述flexible box容器的对齐方式。它包含沿着 flex 容器主轴的内容项之间和周围的空间。它主要用于控制 flex 和 grid 项目如何沿容器的主轴定位。

对齐内容类：

• 调整开始
• 调整结束
• 对齐中心
• 调整之间
• 正当防卫
• 均匀地对齐

justify-start：用于从容器的开头对齐弹性项目。

句法：

...

例子：

输出：

justify-end：用于从容器的末端对齐 flex 项目。

句法：

...

例子：

HTML

 
 
     
 
  
 
    

        GeeksforGeeks
    
 
    Tailwind CSS Justify Content Class 
    
 
        
1
 
        
2
 
        
3
 
        
4
 
    
 
 
  

输出：

justify-center：用于从容器中心对齐 flex 项目。

句法：

...

例子：

HTML

 
 
     
 
  
 
    

        GeeksforGeeks
    
 
    Tailwind CSS Justify Content Class 
    
 
        
1
 
        
2
 
        
3
 
        
4
 
    
 
 
  

输出：

justify-between：弹性项目以均匀的间距放置，其中项目被推到开始，最后一个项目被推到结束。

句法：

...

例子：

HTML

 
 
     
 
  
 
    

        GeeksforGeeks
    
 
    Tailwind CSS Justify Content Class 
    
 
        
1
 
        
2
 
        
3
 
        
4
 
    
 
 
  

输出：

justify-around: flex 项目以相等的间距放置，即角。

句法：

...

例子：

HTML

 
 
     
 
  
 
    

        GeeksforGeeks
    
 
    Tailwind CSS Justify Content Class 
    
 
        
1
 
        
2
 
        
3
 
        
4
 
    
 
 
  

输出：

justify-evenly：项目之间的间距相等，但角的间距不同。

句法：

...

例子：

HTML

 
 
     
 
  
 
    

        GeeksforGeeks
    
 
    Tailwind CSS Justify Content Class 
    
 
        
1
 
        
2
 
        
3
 
        
4
 
    
 
 
  

输出：