在什么情况下,flex-shrink适用于flex元素,它是如何工作的？

Question

我玩过这个漂亮的CSS Flexbox演示页面,我理解了大多数概念,但是我无法flex-shrink在工作中看到.无论我在那里应用什么设置,我都看不到页面上的任何区别.

从规格:

<"柔性成长">

此组件设置"flex-grow",并指定弹性增长系数,该系数决定当分配正空闲空间时,弹性项目相对于弹性容器中其余弹性项目的增长量.省略时,将其设置为"1".

<"柔性缩水">

此组件设置"flex-shrink"手动并指定flex缩减系数,该系数确定当分配负可用空间时,flex项目相对于Flex容器中其余flex项目的收缩程度.省略时,将其设置为"1".在分配负空间时,弹性收缩因子乘以弹性基础.

在什么情况下flex-shrink应用(即负空间分配时)？我已经尝试过在flexbox元素上设置宽度的自定义页面和其中元素的(min-)宽度以产生溢出,但似乎不是描述的情况.

它已经得到了支持吗？

作为一个解决方案,链接演示的一组选项或类似JSFiddle的现场演示将受到高度赞赏.

Answer 1

为了看到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;
}

• http://jsfiddle.net/GyXxT/(无前缀 - Opera或Firefox每晚构建)
• http://jsfiddle.net/GyXxT/1/(webkit)

在这个例子中,两个子元素理想地想要10em宽.如果父元素的宽度大于20em,则第二个子节点将占用剩余空间的两倍,使其看起来更大.如果父元素的宽度小于20em,那么第二个孩子将比第一个孩子剃掉两倍,使它看起来更小.

当前的flexbox支持:Opera(未加前缀),Chrome(前缀),IE10(前缀,但使用稍微不同的属性名称/值).Firefox目前使用的是2009年的旧规范(前缀),但新规范应该在实验版本中可用(无前缀).