Question

我玩过这个很好的CSS Flexbox demo page并且我理解了大多数概念，但是我无法在工作中看到flex-shrink。无论我在那里应用什么设置，我都看不到页面上的差异。

来自spec：

＆LT;“柔性成长”＆GT;

此组件设置'flex-grow'手写并指定   flex grow factor，决定flex项目的增长量   相对于flex容器中其余的flex项目   积极的自由空间是分布的。省略时，将其设置为“1”。

＆LT;“柔性缩水”＆GT;

此组件设置'flex-shrink'手写并指定   flex shrink factor，它决定了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年的旧版规范（前缀），但新规范应该在实验版本中可用（无前缀）。

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

1 个答案: