Tailwind CSS Flex 收缩

CSS flexbox 是开发前端的重要功能，tailwind CSS 中有两个 flex-shrink 可用，所有属性都以类形式覆盖。它是CSS flex-shrink 属性的替代品，用于前端的快速开发。此类指定与该容器内的其他项目相比，该项目将缩小多少。它定义了一个元素与放置在同一容器内的其他元素相比收缩的能力。

弹性收缩：

• flex-shrink-0
• 弹性收缩

flex-shrink-0：该类限制了收缩功能，与同一容器内的内容相比，它具有收缩项目的能力。

句法：

 Contents... 

例子：

HTML

 

  
 
     
  
     
 
  
 
    

        GeeksforGeeks
    
 
  
    Tailwind CSS flex-shrink-0 Class 
  
    
 
        

            Side Part
 
        

            Flex-Shrink-0
        
 
        

            Side Part
 
    
 
 
  

输出：

flex-shrink：该类不限制收缩功能。与屏幕上的剩余空间相比，它具有缩小项目并适应剩余空间的能力。

句法：

..

例子：

HTML

   
 
     
  
     
 
  
 
    

        GeeksforGeeks
    
 
  
    Tailwind CSS flex-shrink Class 
  
    
 
        

            Side Part
 
        

            Flex-Shrink
        
 
        

            Side Part
 
    
 
 
  

输出：