我最近开始使用CSS3 Flex Box玩耍，我已经阅读了许多资源，并亲自玩了它。我已经浏览了：http：//www.w3.org/tr/css3-flexbox/
特别是我在子元素上的flex属性遇到困难：
flex: <positive-flex> <negative-flex> <preferred-size>
我似乎无法理解负面参数的工作原理。积极的曲线是有意义的，因为它会按成比例地从父元素到子女分布空间。
负面的flex，我所理解的应该在溢出父时会收缩元素。但是，我无法使它起作用。任何帮助理解将不胜感激！
这是我一直在测试的代码：http：//jsfiddle.net/nxzqq/2/
html：
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="container">
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
CSS：
#container {
width: 100%;
height: 200px;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
}
#container > :nth-child(1) {
background-color: red;
-webkit-flex: 1 0 0px;
flex: 1 0 0px;
}
#container > :nth-child(2) {
background-color: blue;
-webkit-flex: 2 0 0px;
flex: 2 0 0px;
}
#container > :nth-child(3) {
background-color: orange;
-webkit-flex: 1 0 0px;
flex: 1 0 0px;
}
在flexbox上的Opera文章中，负flex被描述为：
#first {
flex: 1 1 400px;
}
#second {
flex: 2 3 600px;
}
#third {
flex: 1 2 400px;
}
负弹性值尽管名称为正值 - 上述声明中的第二个无单位值。这些只会来 当孩子们溢出父母的容器时 主轴方向。它们也充当比例价值观，但是这次 他们指定了"溢出金额"的比例（金额 孩子将溢出容器）将从 每个孩子的大小，使整体规模降低到相等的大小 父母 - 实际上是为了停止溢出。
假设父容器沿主容器为1100像素 轴。在这种情况下，我们的上述孩子会溢出300 像素（总共沿主轴等于1400像素）。因为 在它们上设置的负弹性值：
- 第一个孩子将获得从中删除的溢出量的1/6，即50个像素。因此，其计算值将为350 像素。
- 第二个孩子将获得从中删除的溢出量的3/6，即150个像素。因此，它的计算值将是 450像素。
- 第三个孩子将获得从中删除的溢出量的2/6，即100像素。因此，其计算值将为300 像素。
因此，较高的负弹性值实际上会导致较小的元素！
来源：http：//dev.opera.com/articles/view/flexbox-basics/