7

我最近开始玩 CSS3 flex box，我已经阅读了很多资源并自己玩弄了它。我浏览过：http ://www.w3.org/TR/css3-flexbox/

具体来说，我在子元素上的 flex 属性上遇到了问题：

flex: <positive-flex> <negative-flex> <preferred-size>

我似乎无法理解negative-flex 参数是如何工作的。positive-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;
}
4

1 回答 1

8

在一篇来自 Opera 关于 flexbox 的文章中，负 flex 是这样描述的：

#first {
  flex: 1 1 400px;
}

#second {
  flex: 2 3 600px;
}

#third {
  flex: 1 2 400px;
}

负 flex 值，尽管它们的名字，是正值——上面声明中的第二个无单位值。只有当子级在主轴方向溢出其父级容器时，这些才会发挥作用。它们也充当比例值，但这次它们指定了“溢出量”（子项溢出其容器的量）的比例，该比例将从每个子项的大小中扣除，以使整体大小降低到等于父级的大小——实际上是为了阻止溢出。

假设父容器沿主轴为 1100 像素。在这种情况下，我们上面的孩子会溢出 300 像素（它们总共等于主轴上的 1400 像素）。由于在它们上设置了负 flex 值：

  • 第一个孩子将获得 1/6 的溢出量，即 50 像素。因此，它的计算值将是 350 像素。
  • 第二个孩子将获得 3/6 的溢出量，即 150 像素。因此，它的计算值将是 450 像素。
  • 第三个孩子将获得 2/6 的溢出量，即 100 像素。因此，它的计算值将是 300 像素。

因此，较高的负 flex 值实际上会导致较小的元素！

来源： http ://dev.opera.com/articles/view/flexbox-basics/

于 2012-12-21T23:48:20.080 回答