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

Posted by Hemadri Sen
Hemadri Sen
8,621 Points

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
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
Adriana Cabrera
Adriana Cabrera
14,618 Points

flex-grow: 1; This one works for me

Salman Akram
PLUS
Salman Akram
Courses Plus Student 40,065 Points
Salman Akram
Salman Akram
Courses Plus Student 40,065 Points

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,302 Points
Jared Armes
Jared Armes
Courses Plus Student 6,302 Points

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

Hemadri Sen
Hemadri Sen
8,621 Points
Hemadri Sen
Hemadri Sen
8,621 Points

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

monica shoriwa
monica shoriwa
5,260 Points
monica shoriwa
monica shoriwa
5,260 Points

/* Complete the challenge by writing CSS below */

.row { display: flex; }

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

Khaidem Sandip Singha
seal-mask
.a{fill-rule:evenodd;}techdegree
Khaidem Sandip Singha
Front End Web Development Techdegree Student 17,574 Points
Khaidem Sandip Singha
.a{fill-rule:evenodd;}techdegree
Khaidem Sandip Singha
Front End Web Development Techdegree Student 17,574 Points 
.row {
   display: flex;
   align-items: center;
 }

.column { 
    flex-grow: 1; 
 } 

.primary { 
  flex-grow: 2; 
}
Alex Hughes
Alex Hughes
4,728 Points
Alex Hughes
Alex Hughes
4,728 Points

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