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!

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

Peter Burdette
Peter Burdette
3,701 Points
Posted by Peter Burdette
Peter Burdette
3,701 Points

Flexbox CSS - Need help understanding a property

Could someone please explain the difference between -webkit-flex-grow and --webkit-flex? He goes right to it at 2:10 in the video demonstration (https://teamtreehouse.com/library/css-foundations/flexbox-and-multicolumn-layout/flexbox-part-2-2). -Webkit-flex looks like it functions the same as -webkit-flex-grow however when I went to experiment with the code it had different results. When the page was greater than 999px column-c was tight and the text was overflowing.

My example: http://codepen.io/anon/pen/Gnmkq

His example: http://codepen.io/anon/pen/jkxJG

The difference between the CSS Code is on line 16.

I looked back at my notes and the previous video to see if I missed something but I couldn't find anything. Please help me understand this!

1 Answer

Steve McKinney
Steve McKinney
29,274 Points
Steve McKinney
Steve McKinney
29,274 Points

flex is shorthand for flex-grow, flex-shrink and flex-basis (specified in that order). From my understanding of the documentation link below if you just specify the flex-grow the initial values of flex-shrink and flex-basis are not modified. So that may be why it appears different.

Documentation: https://developer.mozilla.org/en-US/docs/Web/CSS/flex