Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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,622 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,504 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

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