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

Richard Targett
Richard Targett
4,960 Points
Posted by Richard Targett
Richard Targett
4,960 Points

Flex question

/* Complete the challenge by writing CSS below */ Finally, align the columns to the vertical center of .row. Use the flex container property that controls alignment on the cross axis.

.row { display: flex; }

.column{ flex-grow: 1; }

.primary { flex-grow: 2; }

I tried many things but simply need an answer since Im out of them :\

Karlyn Gibson
Karlyn Gibson
9,176 Points

You have the first step in the process right, which is to set the display property to flex:

.row {
display: flex; }

The second step is to set the correct alignment property for the cross axis to center. When aligning items to the top or bottom of a container, you would use the "align-self" property with a value of "flex-start" or "flex-end". But, when centering content, you use the property "align-items" with a value of "center". So, the final code for this challenge is:

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

2 Answers

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,252 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,252 Points

The challenge says align-items to vertical center, which means you need the align-items property. 

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

This will align items across the cross axis.

My first thought was to use the flex-direction: column property so I was a little confused at first because this changes the direction of flex items from main axis to cross axis.

Remember the main axis runs left to right of the flex container and cross axis goes from top to bottom.

Michele Morison
Michele Morison
13,407 Points
Michele Morison
Michele Morison
13,407 Points

Cross axis is top and bottom and you can switch the layout from horizontal to vertical. With that said, flex-direction: column and flex-direction: column-reverse should work right?