flex:1的标签的宽度计算

flex:1的标签的宽度计算，很悲催的是，他的宽度永远是最后计算的。

宽度计算优先级为：width>适应文本内容的宽度>flex:数值

详细阅读：http://ce.sysu.edu.cn/hope/Item/116154.aspx

http://www.360doc.com/content/14/0811/01/2633_400926000.shtml

　给伸缩项目设置“width”和“height”属性来定义伸缩项目尺寸，而这个伸缩项目是独立于其他伸缩项目。例如，如果我们给主内容(content)设置了一个600px的宽度，不管伸缩容器中有一个、两个或者上百个伸缩项目，主内容的宽度都是600px。
　　如果你想伸缩项目根据伸缩容器剩余的空间来决定伸缩项目的宽度，你可以使用“flex”属性。例如，我们可以告诉浏览器，左边栏和右边栏占用了伸缩容器减去主内容宽度的空间。
　　flex的值于对应的空间成正比。如果左边栏设置了值为“1”和右边栏设置了值为“2”，伸缩容器剩余的空间将按比例分配给左边栏和右边栏，并且右边栏所占的空间是左边栏的两倍：

　　下面是示例中运用在伸缩项目上的一些代码，展示了独立宽度和按比例计算的宽度：
.main {  width: 600px;}.left {  flex: 1;}.right {  flex: 2;} 　　完整的实例
　　这是一个很简单的实例，Flexbox创建了一个经典的三列布局。主内容宽度为60%，而边栏是使用“flex”属性，按比例自动根据伸缩容器剩余空间计算得到对应的宽度：
　　HTML结构
  …       …     …
         　　CSS代码
.container {  display: flex;  flex-flow: row;}.main {  width: 60%;}.left {  flex: 1;}.right {  flex: 2;} 　　示例效果