我最近开始玩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;
}
在一篇来自Opera on flexbox的文章中,负面flex就是这样描述的:
#first {
flex: 1 1 400px;
}
#second {
flex: 2 3 600px;
}
#third {
flex: 1 2 400px;
}
尽管名称为负的flex值,但它们是正值 - 上述声明中的第二个无单位值.这些仅在子项沿主轴方向溢出其父容器时才起作用.它们也作为比例值,但这次它们指定了"溢出量"(儿童溢出容器的数量)的比例,该比例将从每个孩子的大小中扣除,以使整体尺寸减小到等于父级的大小 - 实际上是为了阻止溢出.
假设父容器沿主轴是1100像素.在这种情况下,我们上面的孩子会将它溢出300像素(它们沿着主轴总共等于1400像素).由于设置了负的弹性值:
- 第一个孩子将获得从其中移除的溢出量的1/6,即50像素.因此,其计算值为350像素.
- 第二个孩子将从其中移除溢出量的3/6,即150像素.因此,其计算值为450像素.
- 第三个孩子将获得从其中移除的溢出量的2/6,即100像素.因此,其计算值为300像素.
因此,较高的负弯曲值实际上会导致较小的元素!
资料来源:http: //dev.opera.com/articles/view/flexbox-basics/
| 归档时间： |
|
| 查看次数： |
2342 次 |
| 最近记录： |