CSS CSS Flexbox Layout Flexbox Properties Growing and Aligning Flex Items

Hemadri Sen
Hemadri Sen
8,472 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

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,264 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,472 Points

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

Ilias Loukakis
Ilias Loukakis
19,810 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.

/* 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!