学习flex布局下的flex-grow,flex-shrink,flex-basis

前言：在学会flex布局以后，为网页布局带来了很多便利，特别是在移动端，可以轻松实现以往很难实现的布局。初学flex布局的时候，推荐大家可以先看阮大神的flex布局教程（http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html），可以快速掌握flex布局，实现基本布局需求。

      今天记录的flex子属性：flex-grow,flex-shrink,flex-basis，在了解flex基本布局以后，能更加的了解它们的奥妙。

     flex布局发生在父容器和子容器之间，当父容器设置了display:flex;属性，子容器才能根据自身的属性来布局。

一、先了解下flex-basis/flex-grow/flex-shrink各个的属性

      ①flex-basis属性用于设置或检索弹性盒伸缩基准值；

      ②flex-grow属性用于设置或检索弹性盒子的扩展比率；

      ③flex-shrink属性指定了flex元素的收缩规则。flex元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据flex-shrink的值。

二、了解一下个属性在具体场景下的运用

      （1）设置一个flex-basis属性值：

         当给已设置固定宽度width的盒子，设置一个flex-basis值时，盒子的宽度属性将会被忽略，情况如下：

<div class="container">
    <div class="item item1"></div>
    <div class="item item2"></div>
    <div class="item item3"></div>
    <div class="item item4"></div>
</div>

.container {
    display: flex;
    width: 1000px;
    border: 3px solid #333333;
}
.item {
    width: 100px;
    flex-basis: 250px;
    height: 200px;
}
.item1 {
    background-color:green;
}
.item2 {
    background-color:purple;
}
.item3 {
    background-color:orange;
}
.item4 {
    background-color:blue;
}

当使用max-width或min-width来限制flex-basis时，会如何呢？

先使用max-width来试试效果：

.item {
    max-width: 100px;
    flex-basis: 250px;
    height: 200px;
}

 如图所示，即使将flex-basis设置为250px时，item的宽度还是被限制在了100px，所以，最终显示的宽度是250px。

再试试min-width的效果：

.item {
    min-width: 250px;
    flex-basis: 100px;
    height: 200px;
}

可以看到最终item的宽度是250px而不是100px。

总结：flex-basis的优先级比width高，min-width和max-width则是flex-basis的上限和下限。

（2）设置一个flex-grow属性值：

         当子容器未能占满父容器的空间时，flex-grow可以用来瓜分父容器的剩余空间（剩余空间，就是父容器在主轴方向上还有多少可用的空间），flex-grow的数值决定了占剩余空间的比例。

        我们来看一个例子，当设置item的宽度为100px，flex-grow默认值为0，把item1,item2,item3的flex-grow值设置为1,2,3，那么它们的实际宽度是多少呢？

<div class="container">
    <div class="item item1"></div>
    <div class="item item2"></div>
    <div class="item item3"></div>
    <div class="item item4"></div>
</div>

.container {
    display: flex;
    width: 1000px;
    border: 3px solid #333333;
    color: #ffffff;
}
.item {
    width: 100px;
    height: 200px;
}
.item1 {
    background-color:green;
    flex-grow: 1;
}
.item2 {
    background-color:purple;
    flex-grow: 2;
}
.item3 {
    background-color:orange;
    flex-grow: 3;
}
.item4 {
    background-color:blue;
    flex-grow: 0;
}

 在游览器的效果如下所示：

     如图所示：item1为200px，item2为300px,item3为400px,item4为200排序。那么，item1,item2,item3是如何瓜分剩余空间600px(1000px-4*100px=600px；item原始默认宽度为100px)呢？设扩展比率为x,那么X+2X+3X=600,所以，X=100px。那么，item1=100px+1*100px=200px,item2=100px+2*100px=300px,item3=100px+3*100px=400px了。

（3）设置一个flex-shrink属性值：

         当子容器的宽度大于父容器时，由于父容器的宽度不会变，那么子容器会按照默认的压缩比例进行1:1:1的压缩。如果，设置压缩比例为2，那么则会被压缩的更多。

        根据以上场景，我们可以总结一下结论：

        1、如果父容器空间不够时，压缩用flex-shrink，扩张用flex-grow；

        2、如果希望某个子容器在任何情况下都不被压缩，那么设置flex-shrink:0；

        3、如果子容器的flex-basis设置为0，那么计算剩余空间的时候，将不会为子容器预留空间；

        4、如果子容器的flex-basis设置为auto，那么计算剩余空间的时候讲会根据子容器的内容多少来预留空间。

参考博客：【翻译】Flex Basis与Width的区别  https://www.jianshu.com/p/17b1b445ecd4

                 深入理解css3中的flex-grow、flex-shrink、flex-basis（转）https://www.cnblogs.com/ghfjj/p/6529733.html

版权声明：本文为博主原创文章，未经博主允许不得转载 。