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

我们给了一个带有Flexbox和容器的HTML文档(与Bootstrap链接)。目标是拉伸弹性盒以填充整个容器。这可以通过两种不同的方法来实现，即在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
        
    

  

• 输出：

方法2：使用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
        
    

  

输出：