Question

我最近开始使用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;
}

Answer 1

在Opera上的一篇文章中，flex 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/

CSS3 flexbox的负面弯曲如何工作？

1 个答案: