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

Posted by Alex Friant
Alex Friant
6,444 Points

flex-grow vs. flex

In the quiz for "flexbox-part-2" you have a question:

"Which property determines how much the flex items expand relative to the other flex items?"

The problem is that, technically, two of the multiple choice answers are correct, but only one scores as correct. Those two choices are:

  • flex-grow
  • flex

While taking the test as it is currently designed, choosing "flex" results in a "wrong" answer, and choosing "flex-grow" results in a "correct" answer.

This is faulty because "flex" is shorthand for "flex-grow", if the same syntax is used. The video tutorial demonstrates this concept as well, so you need to either make either answer a possible "correct" answer, or remove "flex" as one of the multiple choice answers.

1 Answer

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Alex,

It wouldn't be accurate to say "The flex property determines how much the flex items expand relative to the other flex items"

The flex property is a shorthand property which lets you set values for the individual properties: flex-grow, flex-shrink, and flex-basis

flex and flex-grow are not synonymous.

From 7.1 The flex Shorthand:

The flex property specifies the components of a flexible length: the flex grow factor and flex shrink factor, and the flex basis.

Alex Friant
Alex Friant
6,444 Points

Understood. However, two properties don't have to be synonymous in order to have the ability to perform a certain action, especially in the context of how the video tutorial was taught.

So, both of these code examples have the same outcome:

-webkit-flex: 1;

-webkit-flex-grow: 1;

It’s not “false” to say that the first property example "determines how much the flex items expand relative to the other flex items” because that's exactly what it does. So does the second property example.

It's one of those questions that, while it may have two answers that are technically correct, one answer is more correct than the other. I haven't seen a multiple choice scenario like that before in this track, so I thought it was an oversight.