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
Justin Sze Wei Teo
9,418 PointsFlex: 1 vs Flex-grow: 1
For this video, I experimented with flew-grow: 1 as opposed to Flex: 1 (recommended by video), i.e. I typed,
.col { flex-grow:1 }
The result is that the columns are not of equal width (which can be achieved by flex: 1). The secondary column is still smaller than the primary column.
Isn't Flex: 1 and Flex-grow: 1 the same?
I thought the first value of Flex is also flex-grow, so aren't they equal? Why do they produce different results in this case?
Kindly advise, thanks!
4 Answers
Thomas Brun
Front End Web Development Techdegree Student 5,896 PointsHi Justin,
The default flex-basis value is auto, which would size the element according to its flex-grow value and distribute extra space accordingly (whereas the extra space isn't distributed if using 0 as the flex-basis value).
This image might help to see the difference between the auto and 0 values.
Hope it helps!
Thomas Brun
Front End Web Development Techdegree Student 5,896 PointsHi,
The first value of the flex shorthand is indeed flex-grow, but using {flex: 1;} will also automatically set the flex-basis to 0, since flex is the shorthand for flex-grow, flex-shrink and flex-basis. I believe that's why your columns are not sized correctly.
Hope it helps!
Justin Sze Wei Teo
9,418 PointsHi Thomas ,
Thanks for the speedy reply!
Assuming I use flex-grow:1 instead of flex:1 , what would flex basis' default value be (since it isn't 0) ?
Thomas Brun
Front End Web Development Techdegree Student 5,896 PointsHi Justin,
That's my understanding as well - the flex-basis property specifies the initial size of the item before any free space is distributed [WPD]. For flex-basis: 0, all the items have the same basis and are thus sized according to their flex-grow properties.
For flex-basis: auto, they're sized either according to their width/height if they are defined, or to their actual content if not.
Best, Thomas
Justin Sze Wei Teo
9,418 PointsHi Thomas,
Thanks for helping
Justin Sze Wei Teo
9,418 PointsJustin Sze Wei Teo
9,418 PointsHi Thomas,
Thanks for attaching the image.
Could I check if I interpreted your image correctly?
1) I'm assuming the numbers 1 & 2 represent flex-grow values.
2) For Flex-basis:0, from the image, each element's width (i.e. the words) and spaces on its left and right, make up a "bigger element", to which the flex-grow ratios are applied.
3) For Flex-basis: auto, the flex-grow values consider the ratio of the left & right spaces of each element (i.e. the words) , leaving out the width of each word, to which the flex-grow ratios are applied.
Not sure if you get what I mean in points (2) & (3) above, but if you do, let me know if I interpreted this correctly!
Thanks!