SOURCE

<div style="margin:30px;line-height:30px">
	<p>flex三个参数分别对应的是 flex-grow, flex-shrink 和 flex-basis，默认值为0 1 auto。</p>
	<p>1.flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。</p>
	<p>2.flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。</p>
	<p>3.flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。</p>
	<div class="container">
		<div class="left"></div>
		<div class="right"></div>
	</div>
	<p>上面布局解析：</p>
	<p>.container { width: 600px; height: 300px; display: flex; }
	</p>
	<p>.left { flex: 1 2 500px; background: red; }
	</p>
	<p>.right { flex: 2 1 400px; background: blue; }
	</p>
	<p>子元素的 flex-shrink 的值分别为 2，1</p>
	<p>溢出：500+400 - 600 = 300。</p>
	<p>总权重为 2 * 500+ 1 * 400 = 1400</p>
	<p>两个元素分别收缩：</p>
	<p>300 * 2(flex-shrink) * 500(width) / 1400= 214.28</p>
	<p>300 * 1(flex-shrink) * 400(width) / 1400= 85.72</p>
	<p>两个元素的最终宽度分别为：</p>
	<p>500 - 214.28 = 285.72</p>
	<p>400 - 85.72 = 314.28</p>
	<div class="container" style="margin-top:30px;">
		<div class="left1"></div>
		<div class="right1"></div>
	</div>
	<p>上面布局解析：</p>
	<p>.container { width: 600px; height: 300px; display: flex; }
	</p>
	<p>
		.left1 { flex: 1 2 300px; background: red; }
	</p>
	<p>.right1 { flex: 2 1 200px; background: blue; }
	</p>
	<p>剩余的空间：600 - (300 + 200) = 100</p>
	<p>子元素的 flex-grow 的值分别为 1，2， 剩余空间用3等分来分</p>
	<p>100 / 3 = 33.3333333</p>
	<p>两个元素的最终宽度分别为：</p>
	<p>left = 300 + 1 * 33.33 = 333.33</p>
	<p>right = 200 + 2 * 33.33 = 266.67</p>
</div>

  * {
    padding: 0;
    margin: 0;
  }
  .container {
    width: 600px;
    height: 300px;
    display: flex;
  }
  .left {
    flex: 1 2 500px;
    background: red;
  }
  .right {
    flex: 2 1 400px;
    background: blue;
  }

  .left1 {
    flex: 1 2 300px;
    background: red;
  }
  .right1 {
    flex: 2 1 200px;
    background: blue;
  }