問(wèn)題描述

這里面有一篇文章介紹css3的flex彈性盒布局

http://www.w3cplus.com/css3/flexbox-adventures.html

然后我寫(xiě)了以下這段代碼去實(shí)驗(yàn)布局，主要是子項(xiàng)目的寬度的計(jì)算問(wèn)題

http://codepen.io/p2227/pen/VvvvyJ

比如這個(gè)元素 [flex li:nth-child(1)] 的寬度是 300-(3002)/(2300+1200+2100)*200 = 180px其他項(xiàng)目也類似

但當(dāng)我嘗試增加一個(gè) padding 屬性,代碼如下 :

http://codepen.io/p2227/pen/dYYYKx

我就不知道這時(shí)候的寬度該怎么算了，按照w3c標(biāo)準(zhǔn)，盒子的寬度應(yīng)該是width屬性+ padding-left + padding-right ,但我發(fā)現(xiàn)實(shí)際結(jié)果并不是這樣的

而且加入 box-sizing:border-box;屬性之后，更加不知道是怎么算的了，理論上應(yīng)該和第一種情況是一樣的，但實(shí)際有出入

http://codepen.io/p2227/pen/rOOOrr

有沒(méi)有人知道flex的寬度計(jì)算的原理？

問(wèn)題解答

stackoverflow有相對(duì)滿意回答了。