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
Kenan Xin
16,139 PointsIsn't align-items:center supposed to align items vertically?
@media (min-width: 769px) {
.main-header,
.main-nav{
display: flex;
}
.main-header{
flex-direction: column;
align-items: center;
}
}
align-items: center; //center: items are centered in the cross-axis
This means that items are centered vertically. However, in this case we want to center-align items horizontally. I'm confused that why align-items:center; works but not justify-content:center?
To horizontally center flex items , shouldn't justify-content:center; be used instead? screenshot
4 Answers
Jason Anello
Courses Plus Student 94,610 PointsHi Kenan,
align-items always operates in the direction of the cross axis and justify-content operates in the direction of the main axis.
So the way that these 2 relate is that they work perpendicularly to each other.
By default, the main axis starts off horizontal and the cross axis is vertical. In this situation justify-content would work horizontally and align-items works vertically.
However, in the code you posted the axes are changed for the main header with flex-direction: column. The main axis is now vertical and the cross axis horizontal. Since align-items works in the direction of the cross axis, it will now work horizontally.
Keep in mind that the nav is also a flex container and it has its own main and cross axes independent of the header.
So I think the important thing here is to always keep track of which direction the main axis is going and which properties operate on which axes.
Let me know if it's still confusing you.
Jake Ford
9,230 PointsJason, I'm also confused.
From what you said, setting the display to column changes the main axis to vertical and vice versa. So how come this code works?
@media (min-width: 769px) {
.main-header,
.main-nav{
display: flex;
justify-content: center;
}
.main-header{
flex-direction: column;
}
}
If justify-content centers things horizontally by default, shouldn't it work vertically now that the axis' have changed? Also, which is the best way for doing this?
Jason Anello
Courses Plus Student 94,610 PointsHi Jake,
The flex-direction property was only applied to the header. This means that the axes were swapped for the header but are still the default for the nav.
You applied justify-content to both the header and the nav. This means that it works on the header vertically but works on the nav horizontally.
So it centers the h1 and ul vertically which doesn't really do anything because they were already centered in that direction. Then it centers the list items within the ul in the horizontal direction because the main axis for the ul is still the default horizontal direction.
With align-items applied to the header you're taking the ul and centering it along the cross-axis (horizontal). With justify-content applied to the nav you're taking the list items within the ul and centering along the main axis (horizontal, also) This ends up achieving the same look.
As far as the best way goes, I think it would come down to personal preference. If you find 2 different ways to do something, I would go with the css that seems simpler and more intuitive.
Jake Ford
9,230 PointsThanks Jason, I understand now. The whole axis changing thing just kind of threw me off!
Jason Anello
Courses Plus Student 94,610 PointsYou're welcome. This example can be a bit confusing because you have 2 flex containers.
Tommy Gebru
30,164 PointsIs it just my computer or is following the first video wrong? I restarted fresh but the workspace project does not give me the right outcome in the video....https://teamtreehouse.com/library/css-flexbox-layout/building-a-layout-with-flexbox/building-a-navigation-bar-with-flexbox
NVM : i was able to get the project to work on codepen...... this means that workspaces is buggy... i havent used in long time.... I forget how frustrating it can be ;)