从spec:
<‘flex-grow’>
This component sets ‘flex-grow’ longhand and specifies the
flex grow factor,which determines how much the flex item will grow
relative to the rest of the flex items in the flex container when
positive free space is distributed. When omitted,it is set to ‘1’.<‘flex-shrink’>
This component sets ‘flex-shrink’ longhand and specifies the
flex shrink factor,which determines how much the flex item will
shrink relative to the rest of the flex items in the flex container
when negative free space is distributed. When omitted,it is set to
‘1’. The flex shrink factor is multiplied by the flex basis when
distributing negative space.
在什么情况下应用弹性收缩(即当负空间分布时)?我试过自定义页面设置宽度的flexBox元素和(min-)宽度的元素内部,使溢出,但似乎它不是描述的情况。
它已经支持吗?
解决方法
HTML:
<div class="container"> <div class="child one"> Child One </div> <div class="child two"> Child Two </div> </div>
CSS:
div { border: 1px solid; } .container { display: flex; } .child.one { flex: 1 1 10em; color: green; } .child.two { flex: 2 2 10em; color: purple; }
> http://jsfiddle.net/GyXxT/(unprefixed – Opera或Firefox nightly build)
> http://jsfiddle.net/GyXxT/1/(webkit)
在这个例子中,两个子元素理想地希望是10em宽。如果父元素大于20em宽,第二个孩子将剩下两倍的剩余空间作为第一个孩子,使其看起来更大。如果父元素小于20em宽,那么第二个孩子将比第一个孩子削减两倍,使它看起来更小。
当前flexBox支持:Opera(无前缀),Chrome(前缀),IE10(前缀,但使用略有不同的属性名称/值)。 Firefox目前使用2009年的旧规范(前缀),但是新规范应该现在可以在实验版本中使用(无前缀)。