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

Posted by Roy Yan
Roy Yan
2,832 Points

I used .row{flex-grow:1;} to equalize the width of the two columns but why it did not change any thing?

I suppose .row {flex-grow:1;} has the same effect as .row{flex:1;} as they all set the flex items with flex-grow 1. But only the .row{flex:1;} is able to equalize the width in my case, why is that???

Roy Yan
Roy Yan
2,832 Points

Seems like I have an answer from what I just searched: "flex: 1;" = "flex-grow: 1; flex-shrink:1 flex-basis: 0%;".

1 Answer

Steven Parker
Steven Parker
231,264 Points
Steven Parker
Steven Parker
231,264 Points

The "flex" keyword is a shorthand that sets flex-grow, flex-shrink, and flex-basis at the same time. If you only give it a single number argument, that number is set as the value for flex-grow — but it also sets flex-shrink and flex-basis to 1.

So setting "flex: 1" is the same thing as setting "flex-grow: 1; flex-shrink: 1; flex-basis: 1".

Roy Yan
Roy Yan
2,832 Points

Thanks for the comment Steven! I've tried using "flex-grow:1; flex-shrink:1;" to replace "flex: 1;", while this can't equalize the width either. I think it doesn't really matter if I write the "flex-shrink:1;" as its default value is 1 already.

Steven Parker
Steven Parker
231,264 Points
Steven Parker
Steven Parker
231,264 Points

I forgot to show the default value it sets for "flex-basis". I updated my answer to include it.

Roy Yan
Roy Yan
2,832 Points

Sadly, "flex-grow:1; flex-shrink:1; flex-basis:auto" still failed unless I set the same "flex-basis" value for both the columns for example "0px" or "5%". WEIRD.

Steven Parker
Steven Parker
231,264 Points
Steven Parker
Steven Parker
231,264 Points

Can you share a workspace snapshot?

Roy Yan
Roy Yan
2,832 Points

Sorry Steven this comment area does not allow to upload image. but I fount out that the "flex:1;" is actually "flex-grow: 1;
flex-shrink:1 flex-basis: 0%;". everything now makes sense as the "flex-basis"'s value is 0% when the value of "flex" is 1. Cheers mate

Steven Parker
Steven Parker
231,264 Points
Steven Parker
Steven Parker
231,264 Points

Good deal. I may have misread the MDN page the first time, but I fixed it in my answer.

And a "snapshot" is not an image (like a "screenshot"). See this video about how to make and share them.

Roy Yan
Roy Yan
2,832 Points

One more question, as you said the "flex-basis" is set to 1 if the "flex" value is 1, then why is the value of the "flex-basis" has no length unit such as "px" "em" and stuff? what does does it mean by "flex-basis:1;"?

Steven Parker
Steven Parker
231,264 Points
Steven Parker
Steven Parker
231,264 Points

Good question. I got that from the MDN page on "flex":

<'flex-basis'>
  Defines the flex-basis of the flex item. ,,, Defaults to 1 when omitted.

Perhaps it's a typo and they meant "0"?