在什么情况下Flex-shrink应用于柔性元素,它是如何工作的?

我已经玩过这个漂亮的CSS Flex的演示页面 ,我理解了大部分的概念,但是我无法看到flex-shrink在工作中。 无论我在那里应用什么设置,我都看不到页面上的差异。

从规格 :

<“柔性成长”>

此组件设置“flex-grow”longhand,并指定flex增长因子,该因子决定了在分配正空闲空间时flex项目相对于flex容器中其余Flex项目将增长的程度。 省略时,设为“1”。

<“柔性缩水”>

此组件设置“flex-shrink”longhand并指定柔性收缩因子,该因子决定在分配负空闲空间时,Flex项目相对于Flex容器中其余Flex项目收缩的程度。 省略时,设为“1”。 柔性收缩因子在分配负空间时乘以柔性基础。

在什么情况下应用flex-shrink (即负空间分布时)? 我已经尝试过在flexbox元素上设置宽度的自定义页面,并且在里面的元素的宽度(min-)使溢出,但它似乎不是描述的情况。

它已经被支持了吗?

作为解决scheme,链接的演示中的一组选项或者JSFiddle-like现场演示将非常感谢。

为了看到flex-shrink的行动,你需要能够使其容器更小。

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; } 

在这个例子中,两个子元素最好都是10em宽。 如果父元素大于20em,则第二个孩子的剩余空间将比第一个孩子多一倍,使其显得更大。 如果父母的元素小于20em宽,那么第二个孩子会比第一个孩子less两倍,使它看起来更小。

目前的flexbox支持:Opera(无前缀),Chrome(前缀),IE10(前缀,但使用略有不同的属性名称/值)。 Firefox目前使用的是2009年以前的旧规格(前缀),但新规范应该在实验版本中可用(前置前缀)。