CSS CSS Flexbox Layout Flexbox Properties Growing and Aligning Flex Items

Hemadri Sen
Hemadri Sen
8,401 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
19,486 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.

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
6,242 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,401 Points

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; 
}
Alex Hughes
Alex Hughes
4,727 Points

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