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

问题描述

我玩过这个漂亮的 CSS Flexbox演示页面，我理解了大多数概念，但我无法在工作中看到 flex-shrink 。

从 spec ：

<'flex-grow'>

这个组件设置'flex-grow'长整型，并指定
flex grow factor，它决定flex项目将增长多少
相对于其余的flex项目在分配
正空闲空间时。当省略时，它被设置为'1'。

<'flex-shrink'>

flex收缩因子，它确定当分配负自由空间时，弹性项目将
相对于弹性容器中剩余的弹性项目收缩
收缩多少。省略时，它设置为
'1'。

在
分配负空格时，将缩放因子乘以flex基数。 c> flex-shrink 应用（即当负空间分布时）？我试过自定义页面的设置宽度的flexbox元素和（min-）宽度的元素内部，使溢出，但似乎它不是描述的情况。

它已经支持吗？

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

解决方案

为了在操作中看到 flex-shrink

HTML：

  < div class =container> 
< div class =child one> 
孩子一
< / div> 
 
< div class =child two> 
孩子两个
< / div> 
< / div> 
  

CSS：

 code> 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年的旧规范（前缀），但新规范应该现在可在实验版本中使用（无前缀）。

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收缩应用于flex元素，它是如何工作的？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！