Tailwind CSS 位置内容

此类接受顺风 CSS 中的许多值。它是 CSS Place Content 属性的替代方案。此类用于控制内容如何同时对齐和对齐。在单个类中设置多个属性值。这里place-content类可以保存align-content和justify-content类的值。

放置内容类：

• 地方内容中心
• 地方内容开始
• 地方内容结束
• 地方内容之间
• 放置内容周围
• 均匀放置内容
• 地方内容拉伸 

place-content-center：这个类在容器的中心对齐弹性项目。

句法：

...

例子：

输出：

place-content-start：这个类在容器的开头对齐弹性项目。

句法：

...

例子：

HTML

 
 
     
 
  
 
    

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

输出：

place-content-end：这个类在容器的末端对齐弹性项目。

句法：

...

例子：

HTML

 
 
     
 
  
 
    

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

输出：

place-content-between：这个类以相等的间距分配柔性线空间。

句法：

...

例子：

HTML

 
 
     
 
  
 
    

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

输出：

place-content-around：这个类在弹性线周围平均分配空间。

句法：

...

例子：

HTML

 
 
     
 
  
 
    

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

输出：

place-content-evenly：这个类定义了它们之间等间距的位置，但与角落的间距不同。

句法：

...

例子：

HTML

 
 
     
 
  
 
    

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

输出：

place-content-stretch：这个类定义了拉伸线以占用弹性容器的剩余空间。它是默认值。

句法：

...

例子：

HTML

 
 
     
 
  
 
    

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

输出：