問題描述

這里面有一篇文章介紹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有相對滿意回答了。