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 Kim Dallas
Kim Dallas
11,461 Points

I got the first two. I need to align items this should work

this should work to align the items

style.css 
/* Complete the challenge by writing CSS below */

.row {
  display: flex;
 }
.column {
  display:flex-grow{1}

}
.primary {
  display:flex-grow 2;
}
.row {
  align-items flex-start
}

1 Answer

Rowan Blackwood
Rowan Blackwood
5,220 Points
Rowan Blackwood
Rowan Blackwood
5,220 Points

Few things up with you code above.

You need to close styles properly using ; and you cannot declare multiple properties in the same line unfortunately. So display: flex; and flex-grow: 1; need to be separate.

It it also perhaps worth noting that curly braces {} are used for a block of styles in css so when you add the closing brace, that will close the block of styles and move on to the next selector.

There is also (as far as I can see) no reason to redeclare the .row as this has been declared on line one so you can just move align-items: flex-start; into the first declaration.

Check this example and see if it helps.

  1. /* Complete the challenge by writing CSS below */
.row {
  display: flex;
  align-items: flex-start;
 }
.column {
  display: flex;
  flex-grow: 1;
}
.primary {
  display: flex;
  flex-grow: 2;
}

Hope this helps.