如何在 Bootstrap 中拉伸 flexbox 以填充整个容器？

我们得到了一个带有 flexbox 和容器的 HTML 文档（与 Bootstrap 链接）。目标是拉伸 flexbox 以填充整个容器。这可以通过两种不同的方法来实现，在 Bootstrap 中使用 flex-fill 或 flex-grow 类。

方法 1：使用flex-fill类： .flex-fill类拉伸元素的宽度以填充整个水平空间。如果有多个同级元素应用了这个类，则水平空间在它们之间平均分配。

句法：

例子：

  

    
    
  
    
  
    
    
  
    GFG Bootstrap Flexbox

  

    Single flexbox without .flex-fill
  
    
        
            GFG Flexbox 1
        
    
  
    Single flexbox with .flex-fill
  
    
        
            GFG Flexbox 1
        
    
  
    Multiple flexbox without .flex-fill
  
    
        
            GFG Flexbox 1
        
        
            GFG Flexbox 2
        
        
            GFG Flexbox 3
        
    
  
    Multiple flexbox with .flex-fill
  
    
        
            GFG Flexbox 1
        
        
            GFG Flexbox 2
        
        
            GFG Flexbox 3
        
    

  

• 输出：

方法二：使用flex-grow类：我们也可以使用 Bootstrap 的 flex-grow-* 类来改变 flexbox 的宽度。

.flex-grow-1通过给其他元素（如果有）只提供必要的空间来将元素拉伸到其最大宽度。

句法：

例子：

  

    
    
  
    
      
    
    

  

    Single flexbox without .flex-grow-1
  
    
        
            GFG Flexbox 1
        
    
  
    Single flexbox with .flex-grow-1
  
    
        
            GFG Flexbox 1
        
    
  
    Multiple flexbox without .flex-grow-1
  
    
        
            GFG Flexbox 1
        
        
            GFG Flexbox 2
        
        
            GFG Flexbox 3
        
    
  
    Multiple flexbox with .flex-grow-1
  
    
        
            GFG Flexbox 1
        
        
            GFG Flexbox 2
        
        
            GFG Flexbox 3
        
    

  

输出：