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 Building a Layout with Flexbox Building a Navigation Bar with Flexbox

Aakash Srivastav
seal-mask
.a{fill-rule:evenodd;}techdegree
Aakash Srivastav
Full Stack JavaScript Techdegree Student 11,638 Points
Posted by Aakash Srivastav
.a{fill-rule:evenodd;}techdegree
Aakash Srivastav
Full Stack JavaScript Techdegree Student 11,638 Points

align-items

What I saw that Guil used "align-items: center" to center the "main-nav" across the "main-axis" . I am confused , as "align-items" property is used to center the content along the "cross axis". At 769 px , he has used this property to center the "main-nav"

2 Answers

andren
andren
28,558 Points
andren
andren
28,558 Points

In flexbox the direction of the main-axis and the cross-axis change depending on the flex-direction. By default the main-axis goes from left to right, and the cross-axis from top to bottom. But if you change flex-direction to column then the two axis essentially swap. The main-axis goes from top to bottom and the cross-axis goes from left to right.

Since he has changed the flow-direction to column he has to center them on the cross-axis if he wants them to be centered horizontally on the screen.

Junet Ismail
Junet Ismail
3,563 Points
Junet Ismail
Junet Ismail
3,563 Points

thanks .. I was confused as well.. i dont think the earlier lessons covered that, might be worth adding that for future content