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 trialRichard Targett
4,960 PointsFlex 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 :\
2 Answers
Jonathan Grieve
Treehouse Moderator 91,253 PointsThe 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
13,407 PointsCross 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?
Karlyn Gibson
9,176 PointsKarlyn Gibson
9,176 PointsYou 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; }