flex属性默认值为0，1，auto。
<meta charset="utf-8">
<style>
#main
{
width:220px;
height:100px;
border:1px solid black;
display:flex;
}
div
{
}
</style>
</head>
<body>
<div id="main">
<div style="background-color:coral;">红色</div>
<div style="background-color:lightblue;">蓝色</div>
<div style="background-color:lightgreen;">带有更多内容的绿色 div</div>
</div>
结果是
image.png
如果增加1区域的内容结果是
image.png
如果设置flex：1
等价于设置flex:1 1 0;
#main div
{
flex:1;
}
结果是所有弹性盒模型对象的子元素都有相同的长度，忽略它们内部的内容（也就是不管内容的多少）
image.png
如果增加1区域的内容结果是
image.png
总结
记住默认是按需分配，如果设为flex：1就是等分，不管内容多少，多了就溢出。
这个搞清楚flex还是挺麻烦的，先学这一点。
