Menu
I started playing around with CSS3 flex box recently, I've read through many resources and played around with it myself. I've looked through: http://www.w3.org/TR/css3-flexbox/
Specifically I am having trouble with the flex property on the child elements:
flex: <positive-flex> <negative-flex> <preferred-size>
I can't seem to understand how the negative-flex parameter works. The positive-flex makes sense as it distributes space proportionally from the parent element to the children.
The negative-flex, from what I understand is supposed to shrink elements when they overflow the parent. However, I have not been able to get this to work. Any help understanding would be greatly appreciated!
Here's the code I've been testing with: 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;
}
811
A flex container expands items to fill available free space or shrinks them to prevent overflow. Most importantly, the flexbox layout is direction-agnostic as opposed to the regular layouts (block which is vertically-based and inline which is horizontally-based).
One of the major drawbacks of using flexbox is performance issues. The use of flexbox can increase the page loading time if you have a larger project. You can compare the page loading time through Chrome development tools using the flexbox and the same pages constructed without using flexbox.
In an article from Opera on flexbox, negative flex is described as such:
#first {
flex: 1 1 400px;
}
#second {
flex: 2 3 600px;
}
#third {
flex: 1 2 400px;
}
The negative flex values, despite their name, are positive values — the second unitless values in the above declarations. These only come into play when the children overflow their parent container in the main axis direction. They also act as proportion values, but this time they specify the proportion of the "overflow amount" (the amount the children overflow their container by) that will be deducted off the size of each child, to bring the overall size down to equal the size of the parent — in effect, to stop the overflow.
Let's say that the parent container is 1100 pixels along the main axis. This being the case, our above children would overflow it by 300 pixels (they equal 1400 pixels along the main axis, in total). Because of the negative flex values set on them:
- The first child would get 1/6th of the overflow amount removed from it, which is 50 pixels. Its computed value would therefore be 350 pixels.
- The second child would get 3/6th of the overflow amount removed from it, which is 150 pixels. Its computed value would therefore be 450 pixels.
- The third child would get 2/6th of the overflow amount removed from it, which is 100 pixels. Its computed value would therefore be 300 pixels.
So a higher negative flex value actually results in a smaller element!
Source: http://dev.opera.com/articles/view/flexbox-basics/
182
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
