40

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

从规格：

<'弹性增长'>

这个组件设置了'flex-grow'并指定了弹性增长因子，它决定了当分配正的可用空间时弹性项目相对于弹性容器中的其余弹性项目将增长多少。省略时，设置为“1”。

<'弹性收缩'>

这个组件设置了'flex-shrink'并指定了弹性收缩因子，它决定了当分配负的可用空间时，弹性项目相对于弹性容器中的其余弹性项目将收缩多少。省略时，设置为“1”。分配负空间时，flex 收缩因子乘以 flex 基数。

在什么情况下会flex-shrink被应用（即当负空间分布时）？我已经尝试自定义页面，在 flexbox 元素上设置宽度和其中元素的（最小）宽度以进行溢出，但似乎不是所描述的情况。

它已经完全支持了吗？

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

4

1 回答 1

39

为了看到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，那么第二个子元素的剃须量将是第一个子元素的两倍，使其看起来更小。

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

于 2013-01-08T22:19:26.713 回答