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

Question

我玩过这个不错的 CSS Flexbox demo page并且我理解大部分概念，但是我无法看到 flex-shrink 的工作。无论我在那里应用什么设置，我都看不到页面上有什么不同。

来自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.

什么情况下会应用flex-shrink(即负空间分布时)？我尝试过在 flexbox 元素上设置宽度和其中元素的(最小)宽度来设置溢出的自定义页面，但它似乎不是所描述的情况。

是否已经完全支持了？

作为解决方案，链接演示中的一组选项或类似 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/ (网络工具包)

在此示例中，理想情况下，两个子元素都希望为 10em 宽。如果父元素的宽度大于 20em，则第二个子元素将占用两倍于第一个子元素的剩余空间，使其看起来更大。如果父元素的宽度小于 20em，那么第二个子元素的宽度将是第一个子元素的两倍，使其看起来更小。

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