flex-shrink 在什么情况下应用于 flex 元素，它是如何工作的? [英] In what circumstances is flex-shrink applied to flex elements and how does it work?

问题描述

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

来自规范:

<块引用>

<'flex-grow'>

这个组件设置了‘flex-grow’，并指定了flex 增长因子，它决定了 flex 项目将增长多少相对于弹性容器中的其余弹性项目，当正自由空间分布.当省略时，它被设置为‘1’.

<'flex-shrink'>

这个组件设置了‘flex-shrink’，并指定了flex 收缩因子，它决定了 flex 项目将有多少相对于 flex 容器中的其余 flex 项目收缩当负自由空间分布时.省略时设置为‘1’.挠性收缩系数乘以挠性基础时分配负空间.

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

是否已经完全支持?

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

解决方案

为了看到 flex-shrink 的作用，你需要能够让它的容器更小.

HTML:

<div class="child one">儿童一
<div class="孩子二">孩子二

CSS:

div {边框:1px 实心；}.容器 {显示:弹性；}.child.one {弹性:1 1 10em；颜色:绿色；}.child.two {弹性:2 2 10em；颜色:紫色；}

• http://jsfiddle.net/GyXxT/(无前缀——Opera 或 Firefox 每晚构建)
• http://jsfiddle.net/GyXxT/1/(网络套件)

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

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

I've played with this nice CSS Flexbox demo page and I understand most of the concepts, however I was not able to see flex-shrink in work. Whatever settings I apply there, I see no difference on the page.

From the 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.

In what circumstances will flex-shrink be applied (i.e. when the negative space is distributed)? I've tried custom page with setting widths on the flexbox element and (min-)widths of the elements inside it to make an overflow, but it seems it's not the described case.

Is it supported at all already?

As a solution, either a set of options on the linked demo, or JSFiddle-like live demo will be highly appreciated.

解决方案

In order to see flex-shrink in action, you need to be able to make its container smaller.

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/ (unprefixed -- Opera or Firefox nightly build)
• http://jsfiddle.net/GyXxT/1/ (webkit)

In this example, both child elements ideally want to be 10em wide. If the parent element is greater than 20em wide, the 2nd child will take twice as much leftover space as the 1st child, making it appear bigger. If the parent element is less than 20em wide, then the 2nd child will have twice as much shaved off of it as the 1st child, making it look smaller.

Current flexbox support: Opera (unprefixed), Chrome (prefixed), IE10 (prefixed, but uses slightly different property names/values). Firefox currently uses the old spec from 2009 (prefixed), but the new spec is supposed to be available in experimental builds right now (unprefixed).

这篇关于flex-shrink 在什么情况下应用于 flex 元素，它是如何工作的?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！