Bulma Flex 增长和收缩

Bulma是 Jeremy Thomas 开发的开源 CSS 框架。该框架基于 CSS Flexbox 属性。它具有高度响应性，最大限度地减少了对响应行为的媒体查询的使用。

在本文中，我们将了解 Bulma 的 flex-grow 和 flex-shrink 属性。 Bulma 框架允许用户在容器中使用 CSS flex-shrink 和 flex-grow 属性。 flex-grow 告诉弹性项目是否可以获得额外的空间，而 flex-shrink 处理弹性项目不需要的空间。

布尔玛 Flex 课程：

• is-flex-grow-0：这个类用于指定弹性项目相对于同一容器内的其他弹性项目将增长多少。
• is-flex-shrink-0：此类用于指定 flex 项相对于同一容器内的其余 flex 项如何收缩。

句法：

• 弹性成长：

    
Flex item
    
Second flex item
    ...

• 弹性收缩：

    
Flex item
    
Second flex item
    ....

示例：下面的示例说明了 Bulma flex-grow和flex-shrink属性。

HTML

  
    
    
    
      
    
  
  
    

      

        GeekforGeeks
      
      

        Bulma Flex-grow and Flex-shrink
      
  
      
      

        

          Flex item
        
        

          Second flex item
        
        

          Third flex item
        
      
  
      

  
      
      

        

          Flex item
        
        

          Second flex item
        
      
    
  

输出：

参考： https://bulma.io/documentation/helpers/flexbox-helpers/