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 CSS Flexbox Layout Flexbox Properties Growing and Aligning Flex Items

Challenge 1 of 3 Select the class .column and use the flex item property and value

I am so lost with this question, it is not working. I have used justify-content, flex-grow and flex-basis property but nothing worked.

This is the question: Select the class .column and use the flex item property and value that will expand the columns to fill the space of the row.

Please help

6 Answers

Ilias Loukakis
Ilias Loukakis
20,489 Points

You actually need just flex-grow defined as 1 as Dan noticed above. flex-grow: 2 would be handy if someone wanted to expand an individual flex item twice the size of the rest flex items.

Adriana Cabrera
Adriana Cabrera
14,618 Points

flex-grow: 1; This one works for me

Hi Hemadri,

Is this code below similar to your code example?

.column {
  flex-grow: 2; 
}

It is working well on my side, maybe you can refresh it.

-Salman

Jared Armes
Jared Armes
Courses Plus Student 6,391 Points

I can confirm that this is the correct answer. Perhaps you should vote this as the best answer for other users like myself?

Thank you, i already got it to work. It was some issue with the preview but it finally worked. thanks a lot.

/* Complete the challenge by writing CSS below */

.row { display: flex; }

.column { flex-grow: 1; align-items: center; } .primary { flex-grow: 2; }

.row {
   display: flex;
   align-items: center;
 }

.column { 
    flex-grow: 1; 
 } 

.primary { 
  flex-grow: 2; 
}

This question is so poorly worded, thanks for the answer!