这里面有一篇文章介绍css3的flex弹性盒布局
http://www.w3cplus.com/css3/flexbox-adventures.html
然后我写了以下这段代码去实验布局，主要是子项目的宽度的计算问题
http://codepen.io/p2227/pen/VvvvyJ
比如这个元素 [flex li:nth-child(1)] 的宽度是 300-(3002)/(2300+1200+2100)*200 = 180px
其他项目也类似
但当我尝试增加一个 padding 属性,代码如下 :
http://codepen.io/p2227/pen/dYYYKx
我就不知道这时候的宽度该怎么算了，按照w3c标准，盒子的宽度应该是width属性+ padding-left + padding-right ,但我发现实际结果并不是这样的
而且加入 box-sizing:border-box;属性之后，更加不知道是怎么算的了，理论上应该和第一种情况是一样的，但实际有出入
http://codepen.io/p2227/pen/rOOOrr
有没有人知道flex的宽度计算的原理？
stackoverflow有相对满意回答了。