CODEWITHSUNDEEP
cssflexbox
Sanketh Katta
Sanketh Katta

Reputation: 6311

How does CSS3 flexbox negative-flex work?

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;
}

Upvotes: 7

Views: 3694

Answers (1)

cimmanon
cimmanon

Reputation: 68339

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/

Upvotes: 7

Related Questions