📜  如何使用 CSS 使 flexbox 子项达到其父项的 100% 高度?

📅  最后修改于: 2021-08-30 13:13:11             🧑  作者: Mango

CSS Flexbox 是创建网站布局的绝佳工具。可以通过两种方式使 flex-box 子项达到其父项的 100% 高度。这有点棘手,因为它肯定会显示错误。
例如,子级可能会流出父级边界,或者它可能不会达到您将在浏览器输出中看到的 100% 高度。

示例 1:此示例使用 CSS 制作高度为 100% 的子 flex-box。



   
      
          Make flex-box child height 100%
      
        
      
   
     
   
      
         
            One          
         
            Two          
         
            Three          
         
            Four          
         
            Five          
      
   

输出:

示例 2:实现此目的的第二种方法是在父 div 中使用 align-items 属性为 ‘strech’。它使每个 .child-div 的高度是其父高度的 100%。



   
      
          Make flex-box child height 100%
      
        
      
   
     
   
      
         
            One          
         
            Two          
         
            Three          
         
            Four          
         
            Five          
      
   

输出:

示例 3:此示例使子项的宽度为父项的 100%。



   
      
          Make flex-box child width 100%
      
        
      
   
     
   
      
         
            One          
         
            Two          
         
            Three          
         
            Four          
         
            Five          
      
   

输出: