flexbox - css3[flex-shrink]属性在子项有 padding/box-sizing 属性时，是如何计算子项宽度的?

问题描述

这里面有一篇文章介绍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有相对满意回答了。