flex布局之flex-grow和flex-shrink如何计算

此文已由作者张含会授权网易云社区发布。

欢迎访问网易云社区，了解更多网易技术产品运营经验。

关于盒模型布局

如何实现两栏布局？

(表格)
流式，
浮动，
定位

如何选择？

流式 > 浮动 > 定位

弹性盒模型FlexBox

• 容器和项目 .box .item

• 设置容器flex布局

    .box{      display: flex;        
    }

  // 行内元素

    .box{      display: inline-flex;  }

• 容器属性

1. flex-direction 容器内项目的排列方向（常用）

    .box {     flex-direction: row | row-reverse | column | column-reverse; }

2. flex-wrap 容器内项目换行方式

    .box{     flex-wrap: nowrap | wrap | wrap-reverse; }
    注意：有些浏览器不支持

3. flex-flow 是flex-direction和flex-wrap的简写属性

1. justify-content 容器内项目的水平对其方式 （常用）

   .box {

    justify-content: flex-start | flex-end | center | space-between | space-around;

   }

2. align-items 容器内项目的垂直对齐方式（常用）

    .box {     align-items: stretch | flex-start | flex-end | center | baseline ; }

3. align-content 容器内项目的垂直对齐方式，多行生效，单行不生效

    .box {
        align-content: stretch | flex-start | flex-end | center | space-between | space-around ;
    }

所以需要记住：    flex-direction，justify-content，align-items

• 项目属性

1. order 排列顺序，越小越靠前，默认为0，可以为负数

    .item{     order: <integer>; }

2. flex-grow 扩张比例，默认为0

    .item{     flex-grow: <number>; }

3. flex-shrink 收缩比例，默认为1

    .item{     flex-shrink: <number>; }

4. flex-basis 分配多余空间前占据的空间

    .item {     flex-basis: auto | <length>; /* default auto */
    }

5. flex 是    flex-grow，flex-shrink，flex-basis 的简写

    .item {     flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] } .item{     flex: 1; }

6. align-self 项目的对齐方式，覆盖容器align-items的值

    .item {     align-self: auto | flex-start | flex-end | center | baseline | stretch; }

项目属性要记住flex

flex-grow 和 flex-shrink如何计算？

flex-grow

对于剩余空间，按照一定的比例分配到项目，以下例子的分配过程如下：

1. 先计算剩余空间1000-200-400-200=200

2. 剩余空间被分成4份，item1占2/4，item2占1/4，item3占1/4

3. item1共占200+200x2/4=300，item2共占400+200x1/4=450，item3共占200＋200x1/4=250

    <div class="box">
        <div class="item">100</div>
        <div class="item">200</div>
        <div class="item">300</div>
    </div>

    .box {
        display: flex;
         1000px;
        height: 300px;
    }
    .item{
        height: 50px;
    }
    .item:first-child{
        flex: 200px 2 1;
    }
    .item:nth-child(2){
        flex: 400px 1 2;
    }
    .item:nth-child(3){
        flex: 200px 1 1;
    }

flex-shrink

对于溢出空间，按照一定的比例收缩到项目，以下例子的分配过程如下：

1. 计算溢出空间200+400+200-400=400

2. 注意flex-shrink是收缩比例， 是基于项目宽度的，加入item1的宽度需要收缩n的比例能满足条件，根据设置item2应该收缩2n，item2的收缩比例是n，200xn+400x2n+200xn=400，所以n=1/3(0.33)

3. item1所占的宽度为200x(1-0.33)=133.33，item2所占宽度为400x(1-2x0.33)=133.33，item3所占空间为200x(1-0.33)=133.33

注意：

如果设置item1的收缩比是1，item2的收缩比是100，item3的收缩比是1，根据公式计算收缩比例是1/1001，item2所占空间为400x(1-100x(1/1001))，约等于0，很明显，如果是0，项目内容是没办法显示的，所以项目的空间不会全部收缩，肯定会预留下项目内容所需要的最小空间，这时候的计算方式会发生变化，假设item2内容所占最小空间为20，所以item2只能收缩掉400-20=380，剩余20按比例收缩在item1和item3。

    <div class="box">
        <div class="item">100</div>
        <div class="item">200</div>
        <div class="item">300</div>
    </div>
    .box {        display: flex;         400px;        height: 300px;
        box-sizing: border-box;        background: #0f0;
        justify-content: space-around;
    }
    .item{
      box-sizing: border-box;      height: 50px;  
      background: #f00;      color: #fff;
      line-height: 50px;
    }
    .item:first-child{      flex: 200px 1 1;
    }
    .item:nth-child(2){      flex: 400px 1 2;
    }
    .item:nth-child(3){      flex: 200px 1 1;
    }

免费体验云安全(易盾)内容安全、验证码等服务

更多网易技术、产品、运营经验分享请点击。

相关文章：
【推荐】 大数据算法：排位问题（2）
【推荐】 OBS源码编译开发