弹性布局flex

上次写了一篇flex：1与flex：auto，感觉不是很清晰，刚好看到一篇大神的文章，动手试了试

这是这次测试的代码，不妨猜猜

flex-grow：定义了当flex容器有多余空间时，item是否放大。默认值为0，即当有多余空间时也不放大；可能的值为整数，表示不同item的放大比例

flex-shrink：定义了当容器空间不足时，item是否缩小。默认值为1，表示当空间不足时，item自动缩小，其可能的值为整数，表示不同item的缩小比例

flex-basis：表示项目在主轴上占据的空间，默认值为auto

flex：1，即flex：1 1 0%；

flex：auto，即flex：1 1 auto；

flex：none，即flex：0 0 auto；

上面是一些书面的解释，看看效果图

item1为200px，item2为200px，item3为400px

?

下面说说具体的计算

父容器总宽：800px；

子容器基准值：item1(0%)即为0px；item2(auto)即为200px；item3(auto)即为200px；

剩余空间：800 - 0 - 200 - 200 = 400

放大比例 1+0+1 =2

item1 = 0px + 400px/2*1 = 200px;

item2 = 200px +400px/2*0 = 200px;

item3 = 200px +400px/2*1 = 400px