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

小编典典

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

css

我玩过这个漂亮的CSS Flexbox演示页面，并且了解大多数概念，但是flex- shrink在工作中看不到。无论我在此处应用什么设置，在页面上都看不到差异。

从规格：

<’灵活成长’>

该组件设置’flex-
grow’的长度，并指定flex增长因子，该因子决定了当分配正的自由空间时，flex项目相对于flex容器中其余的flex项目将增长多少。省略时，它设置为“
1”。

<’伸缩收缩’>

该组件设置’flex-
shrink’的长度，并指定flex收缩因子，该因子确定在分配负的自由空间时，flex项相对于flex容器中其余的flex项目将收缩多少。省略时，它设置为“
1”。当分配负空间时，可伸缩系数乘以可伸缩基础。

在什么情况下flex- shrink可以使用（即，当负数空间分布时）？我尝试过在flexbox元素上设置宽度和其中的元素的（min-）widths设置自定义页面以引起溢出，但似乎不是所描述的情况。

完全支持吗？

作为解决方案，将高度赞赏链接演示中的一组选项或类似JSFiddle的实时演示。

阅读 350

2020-05-16

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

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

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

2020-05-16