css3的flex: flex-grow flex-shrink flex-basis详细用法

flex：可以同时添加三个属性值，分别为 flex-grow flex-shrink flex-basis，那他们分别是啥意思，拆分开来如何使用呢？这里来给大家详细的介绍！
flex-grow
设置弹性盒的扩展比率，如果给它们共同设置一个该属性的话，它代表按等比例平分子级所占宽度之外的剩余空间，它的默认值为1，也就是flex-grow：1；代表的是按照1:1:1来平分剩余空间。
如代码：

	<div class="wrapper">
        <div class="content">1</div>
        <div class="content">2</div>
        <div class="content">3</div>
    </div>
	<style>
        .wrapper {
            height: 300px;
            width: 600px;
            border: 1px solid black;
            display: flex;
            flex-wrap: nowrap;
        }
        .content {
            height: 100px;
            width: 100px;
            border: 1px solid #f00;
            flex-grow: 1;
        }
    </style>

蓝色区域就是他们的相对于wrapper的宽度所剩余的部分，此区域宽度为600-100*3=300
三个子div将按照1:1:1的比例划分空余的300px，以至于每人分得100px，最后他们的宽度将撑开到200px，wrapper宽度被子div填满，最后子div高度也按它的等比例撑开。
如果此属性在子div身上，如：

<style>
        .wrapper {
            height: 300px;
            width: 500px;
            border: 1px solid black;
            display: flex;
            flex-wrap: nowrap;
        }
        .content {
        	height: 100px;
            width: 100px;
            border: 1px solid #f00;
        }
        .content:nth-of-type(1) {
            flex-grow: 1;
        }
        .content:nth-of-type(2) {
            flex-grow: 2;
        }.content:nth-of-type(3) {
            flex-grow: 3;
        }
    </style>

它们将按照 1：2：3的比例来划分空余部分，也就是第一个div宽度为100+300/61=150px
第二个div宽度为100+300/62=200px，第三个div宽度为100+300/6*3=250px。

flex-shrink
设置弹性盒的收缩比率，子div宽度之和大于父级盒子宽度时，它可以按比例收缩宽度，它收缩要比flex-grow复杂的多，用法和flex-grow类似，直接上代码！

	<style>
        .wrapper {
            height: 300px;
            width: 600px;
            border: 1px solid black;
            display: flex;
            flex-wrap: nowrap;
        }
        .content {
            height: 100px;
            width: 200px;
            box-sizing: border-box;
            /* border也会被划入到宽度的比例计算中，这里把他注释掉 */
            /* border: 1px solid #f00; */
            flex-shrink: 1;
        }
        .content:nth-of-type(3) {
            width: 400px;
            flex-shrink: 3;
        }
    </style>

它们的收缩不是按照flex-grow那样来算的，已知内容超出部分，也就是蓝色部分的宽度为400+200+200-600=200px，它们三的平分比例为1:1:3，加权收缩值为2001+2001+4003=1600px；第一个子div和第二个一样，被溢出量为2001/ 1600 200 = 25px，第三个子div的被溢出量为4003 / 1600*200 = 150px；最终它们三个的宽度分别为175px、175px、250px，占有量大，分出去的当然多咯。

**这里提示下：**其实被收缩的的部分是内容区的宽度，如果把border或者padding算进去的话，子div所占的的宽度虽然没变，但是它会加上border或padding值，也就是说子div的内容区的宽度将会减少，最后按比例收缩的时候将会出现小数；如图

我们来证明一下，上代码：

<style>
        .wrapper {
            height: 300px;
            width: 600px;
            border: 1px solid black;
            display: flex;
            flex-shrink: nowrap;
        }
        .content {
            height: 200px;
            width: 200px;
            box-sizing: border-box;
            padding: 0 80px;
            flex-grow: 1;
        }
        .content:nth-of-type(3) {
        	width: 400px;
            flex-shrink: 3;
        }
    </style>

由于给它设置box-sizing：border-box；左右padding为80px，此时第一个和第二个子div的内容区宽度为200-802 = 40px，第三个内容区宽度为400-802 = 240px，比例为1:1:3，溢出部分宽度为200+200+400-600 = 200px，加权收缩值为401 + 401 + 2403 = 800px,这里没问题吧！为了证明收缩的地方是子div的内容区宽度，我们用内容区的宽度来计算，它们的溢出量分别为401 / 800200 = 10px，401 / 800200 = 10px，2403 / 800*200 = 180px；所以子div里面左右padding值各为80px，第一个和第二个子div内容区宽度为40-10 = 30px，第三个子div内容区宽度应为240-180 = 60px，有图有真相，看图：

第一个和第二个子div宽度：
第三个子div宽度：

flex-basis
它与设置的宽度再设置没多大区别，例如设置子div --> content 的 width: 100px，再设置flex-basis：200px，此时content的宽度为200px，由于flex-basis的优先级比width高，它会显示flex-basis的宽度，子div --> content的宽度被覆盖。
另外，如果设置的是width，若里面给里面添加英文文本，则里面的文本不换行，如果英文文本超出子div宽度的话，会出现文本溢出；如果设置的是flex-basis，里面的英文文本也不换行，当文本超出子div的宽度，文本会撑开子div的宽度，此时子div的宽度等于英文文本的宽度。