flex: 1到底是什么意思？

语法：
auto | none | [ <‘flex-grow’> <‘flex-shrink’>? || <‘flex-basis’> ]
定义：
flex-grow: 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大 。
flex-shrink: 定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小 。
flex-basis: 定义了在分配多余空间之前，项目占据的空间。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。若值为0，则必须加上单位，以免被视作伸缩性。

flex 其实是 flex-grow flex-shrink flex-basis 这三个属性值组合的缩写，各等同情况如下：

	.item {
		flex: 1;
	}
	/* 等同 */
	.item {
		flex-grow: 1;
		flex-shrink: 1;
		flex-basis: 0%;
	}

	.item {
		flex: auto;
	}
	/* 等同 */
	.item {
		flex-grow: 1;
		flex-shrink: 1;
		flex-basis: auto;
	}

	.item {
		flex: none;
	}
	/* 等同 */
	.item {
		flex-grow: 0;
		flex-shrink: 0;
		flex-basis: auto;
	}

	.item {
		flex: 1 2;
	}
	/* 等同 */
	.item {
		flex-grow: 1;
		flex-shrink: 2;
		flex-basis: 0%;
	}

	.item {
		flex: 1 100px;
	}
	/* 等同 */
	.item {
		flex-grow: 1;
		flex-shrink: 1;   /* flex-shrink 默认值 1 */
		flex-basis: 100px;
	}

	.item {
		flex: 20 50 100px;
	}
	/* 等同 */
	.item {
		flex-grow: 20;
		flex-shrink:50;
		flex-basis: 100px;
	}

剩余的空间是 flex 容器的大小减去所有 flex 项的大小加起来的大小。如果所有的兄弟项目都有相同的 flex-grow 系数，那么所有的项目将获得相同的剩余空间，否则将根据不同的 flex-grow 系数定义的比例进行分配。

	<div class="box">
	    <div class="item1"></div>
	    <div class="item2"></div>
	    <div class="item3"></div>
	    <div class="item4"></div>
	</div>

	.box {
		width: 1000px;
        display: flex;
    }
	.box > div {
        height: 100px;
	}
	.item1 {
        width: 400px;
        flex: 2 1 0%;
        background-color: red;
	}
	.item2 {
        width: 400px;
        flex: 4 1 200px;
        background-color: green;
    }
    .item3 {
        width: 400px;
        flex: 1 1 auto;
        background-color: blue;
    }
    .item4 {
        flex: 1;
        background-color: yellow;
    }

父容器总尺寸为： 1000px

子元素的总基准值是：0% + 200px + auto(400px) + 0% = 600px

故剩余空间为：1000px - 600px = 400px

伸缩放大系数之和为： 2 + 4 + 1 + 1 = 8

每份 400 / 8 = 50px

各项目分配宽度为：

• 50 * 2 = 100px
• 50 * 4 = 200px
• 50 * 1 = 50px
• 50 * 1 = 50px

所以各项目最终宽度为：

• item1 = 0% + 100px = 100px
• item2 = 200px + 200px = 400px
• item3 = 400px + 50px = 450px
• item4 = 0% + 50px = 50px

当 flex-basis 基准值取 0% 的时候，width不管设置多少，该元素都视为width: 0px。

当 flex-basis 基准值取 auto 的时候，根据规则基准值使用值是主尺寸值，即width 的值。