以下是一段简单的flex布局代码
<style>
* {
padding: 0;
margin: 0;
}
.container {
width: 600px;
height: 300px;
display: flex;
}
.left {
flex: 1 2 300px;
background: red;
}
.right {
flex: 2 1 200px;
background: blue;
}
</style>
</head>
<body>
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
如上代码显示:'父盒子container'弹性容器内部放了两个'子盒子' 此时默认主轴为x轴，flex影响水平布局
其中左边'子盒子'中的css样式为flex: 1 2 300px 右边的为flex: 2 1 200px;
flex中的从左到右的值分别是：flex-grow属性的值、flex-shrink属性的值、flex-basis属性的值
我们先说flex-basis属性：该属性的默认值是 auto,浏览器会检测这个元素是否具有确定的尺寸，上边代码分别给左右给了一个固定的值。浏览器会先把这个固定值的大小给对应的子盒子。这个值若大于父盒子的高或宽，子盒子会撑出去，不会影响父盒子的大小。
flex-shrink属性的值表示是否伸缩且对应的伸缩比。
flex-grow属性的值表示占剩余可用空间的所占比
整体分析，首先父盒子的宽为600px，左flex-basis值为300px固定，右flex-basis为200px固定。则flex-grow剩余可用空间的大小为100px，左的 flex-grow值为1，右flex-grow值为2.把剩余可用空间分成了3份，则左盒子的宽为（300+1100/3）px右盒子为（200+2100/3)px
下面我们修改一下css样式
.container {
width: 600px;
height: 300px;
display: flex;
}
.left {
flex: 1 2 500px;
background: red;
}
.right {
flex: 2 1 400px;
background: blue;
}
上边代码我们修改了第三个值（即flex-basis固定值）。此时左flex-basis值为500px固定，右flex-basis为400px固定。子元盒子宽度总和为900px>600px 超出的宽度大小为300px。子盒子应该溢出父盒子.但第二个值都为非0整数，表示都伸缩，这里应为是超出父盒子的宽所以应该缩。
那左盒子的宽度如何计算呢，left的宽应 = 500 - 300*(5002/ (5002 + 4001))
右边盒子的宽度应=400-300（4001/(5002+400*1)）
