cari

Rumah  >  Soal Jawab  >  teks badan

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的宽度计算的原理?

高洛峰高洛峰2782 hari yang lalu657

membalas semua(1)saya akan balas

  • 天蓬老师

    天蓬老师2017-04-17 11:24:06

    stackoverflow有相对满意回答了。

    balas
    0
  • Batalbalas