Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS Unused CSS Stages Flexbox and Multi-Column Layout Flexbox: Part 2

SAMUEL LAWRENCE
PLUS
SAMUEL LAWRENCE
Courses Plus Student 8,447 Points

I don't understand the numbering system for the flex, flex-grow etc

In this video Guil uses some numbers on the flex and the flex-grow property. He used the flex-grow on the .nav element and he gave it a value of 1. Since he didn't mention what the numbers stand for or anything, I experimented with other numbers, whole numbers decimal numbers, but none had any effect, except the number 1. Why is that? Then he used the flex property but he used it on the .col element. I notice it does something similar to the flex-grow property so I tried it on the .nav element and it had the same effect as the flex-grow. on the .col element he used numbers 2 and 3 and they changed the sized of the columns, however when I used flex on the .nav element it still only changes with the number 1, but on .col it changes and gets bigger when you use 2 or 3, but when I tried to use 4 to see what results it would have again, nothing happened. So it seems weird to me that a certain range of numbers work and others don't and where that same range works on the .col, it won't work on the .nav. Please can someone clarify that for me. And please I'm a newb so speak clearly and in layman's term please. thank you guys.

Guil Hernandez

1 Answer

Kelly von Borstel
Kelly von Borstel
28,880 Points

There's a pretty good explanation of flex-grow property on css-tricks website: http://css-tricks.com/almanac/properties/f/flex-grow/