CSS flex-grow用法及代码示例

flex-grow属性指定与该容器内的其他项目相比，该项目将增长多少。换句话说，与同一个容器中存在的其他项目相比，它是项目成长的能力。

注意：如果容器中的物料不是柔性物料，则flex-grow属性将不会影响该物料。

用法:

flex-grow:number| initial| inherit;

属性值：

number:一个数字，用于定义商品与其他灵活商品相比的增长方式。
initial:它将值设置为默认值。
inherit:它从其父元素继承属性。

例：在这里，我们将看到在单个容器中有5个div，我们将应用flex-grow：在第二个div上，该div与其他4个div相比将增长。我们可以将flex-grow应用于与该div的宽度相比将增长div的同一容器中的任何文档，flex-grow属性将帮助该div与该容器中的其他项目相比增长。

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        CSS | flex-grow Property 
    </title> 
    <style> 
        #main { 
            width:350px; 
            height:100px; 
            border:1px solid black; 
            display:-webkit-flex; 
            display:flex; 
            color:white; 
            text-align:center; 
        } 
          
        h1 { 
            color:#009900; 
            font-size:42px; 
            margin-left:50px; 
        } 
          
        h3 { 
            margin-top:-20px; 
            margin-left:50px; 
        } 
          
        #main div:nth-of-type(1) { 
            flex-grow:1; 
        } 
          
        #main div:nth-of-type(2) { 
            flex-grow:5; 
        } 
          
        #main div:nth-of-type(3) { 
            flex-grow:1; 
        } 
          
        #main div:nth-of-type(4) { 
            flex-grow:1; 
        } 
          
        #main div:nth-of-type(5) { 
            flex-grow:1; 
        } 
    </style> 
</head> 
  
<body> 
    <h1>GeeksforGeeks</h1> 
    <h3>The flex-grow:number</h3> 
  
    <!-- Making 5 divs in main -->
    <div id="main"> 
        <div style="background-color:#009900;"> 
          Sql</div> 
        <div style="background-color:#00cc99;"> 
          Python</div> 
        <div style="background-color:#0066ff;"> 
          Java</div> 
        <div style="background-color:#66ffff;;"> 
          C++</div> 
        <div style="background-color:#660066;"> 
          C#</div> 
    </div> 
</body> 
  
</html>

输出：

支持的浏览器：CSS |下面列出了flex-grow属性：

谷歌浏览器29.0
Internet Explorer 11.0
Mozila Firefox 28.0
Opera 17.0
Safari 9.0

相关用法

注：本文由纯净天空筛选整理自Sabya_Samadder大神的英文原创作品 CSS | flex-grow Property。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。