• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • php7教程
  • MySQL手册
  • apache手册
  • flex-grow

    版本:CSS3

    CSS属性flex-grow设置了一个flex项主尺寸的flex增长系数。它指定了flex容器中剩余空间的多少应该分配给项目(flex增长系数)。主尺寸是项的宽度或高度,这取决于flex-direction值。剩余的空间是flex容器的大小减去所有flex项的大小加起来的大小。如果所有的兄弟项目都有相同的flex-grow系数,那么所有的项目将获得相同的剩余空间,否则将根据不同的flex-grow系数定义的比例进行分配。flex-grow与其他的flex属性flex-shrinkflex-basis一起使用,通常使用flex速记来定义,以确保所有的值都被设置。

    示例

    /* <number> values */
    flex-grow: 3;
    flex-grow: 0.6;
    
    /* 全局 values */
    flex-grow: inherit;
    flex-grow: initial;
    flex-grow: unset;
    

    浏览器支持

    IE浏览器火狐浏览器opera浏览器chrome浏览器safari浏览器
    IE11以上版本的浏览器都支持flex-grow

    语法

    flex-grow:<number>

    取值

    • <number>:参见<number>。负值无效,默认为0

    说明:

    设置或检索弹性盒的扩展比率。

    • 根据弹性盒子元素所设置的扩展因子作为比率来分配剩余空间。
    • flex-grow的默认值为0,如果没有显示定义该属性,是不会拥有分配剩余空间权利的。
    • 对应的脚本特性为flexGrow

    示例:b,c将按照1:3的比率分配剩余空间

    <ul>
    	<li>a</li>
    	<li>b</li>
    	<li>c</li>
    </ul>
    
    .flex{display:flex;width:600px;margin:0;padding:0;list-style:none;}
    .flex li:nth-child(1){width:200px;}
    .flex li:nth-child(2){flex-grow:1;width:50px;}
    .flex li:nth-child(3){flex-grow:3;width:50px;}
    

    本例中b,c两项都显式的定义了flex-grow,flex容器的剩余空间分成了4份,其中b占1份,c占3分,即1:3。flex容器的剩余空间长度为:600-200-50-50=300px,所以最终a,b,c的长度分别为:

    • a: 50+(300/4)=200px
    • b: 50+(300/4*1)=125px
    • a: 50+(300/4*3)=275px
    默认值0
    适用于flex项,包括in-flow伪元素
    继承性
    动画性visual
    计算值指定值

    实例

    //HTML
    
    <h4>this is a flex-grow</h4>
    <h5>a,b,c and f are flex-grow:1 . d and e are flex-grow:2 .</h5>
    <div id="content">
      <div class="box" style="background-color:red;">a</div>
      <div class="box" style="background-color:lightblue;">b</div>
      <div class="box" style="background-color:yellow;">c</div>
      <div class="box1" style="background-color:brown;">d</div>
      <div class="box1" style="background-color:lightgreen;">e</div>
      <div class="box" style="background-color:brown;">f</div>
    </div>
    
    //CSS
    
    #content {
      -ms-box-orient: horizontal;
      display: -webkit-box;
      display: -moz-box;
      display: -ms-flexbox;
      display: -moz-flex;
      display: -webkit-flex;
      display: flex;
    
      -webkit-justify-content: space-around;
      justify-content: space-around;
      -webkit-flex-flow: row wrap;
      flex-flow: row wrap;
      -webkit-align-items: stretch;
      align-items: stretch;
    }
    
    .box {
      flex-grow: 1;
      border: 3px solid rgba(0,0,0,.2);
    }
    
    .box1 {
      flex-grow: 2;
      border: 3px solid rgba(0,0,0,.2);
    }
    
    //HTML
    <div id="main">
      <div>1</div>
      <div>2</div>
      <div>3</div>
    </div>
    
    //CSS
    #main{
     width:450px;
     height:300px;
     border:1px solid #ccc;
     display:-webkit-flex;
     display:flex;
    }
    
    #main div:nth-of-type(1){flex-grow:1;}
    #main div:nth-of-type(2){flex-grow:3;}
    #main div:nth-of-type(3){flex-grow:1;}
    

    效果图:

    上篇:display:flex

    下篇:place-items