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

Jess W
Jess W
4,391 Points
Posted by Jess W
Jess W
4,391 Points

Setting the .main-nav to align-self: center; Vs the parent .main-header align-items: center;

I was wondering if there's a difference in how the structure of the overall page is affected if I were to only adjust the .main-nav align-self:center VS the .main-headers align-items: center; ? Is it considered better practice to change the parent container and not the child in this case? if that makes sense?

@media (min-width: 769px) { .main-header, .main-nav { display: flex;

.main-header { flex-direction: column; align-items: center; }

/* ----Setting the .main-nav instead? ---- / / .main-nav { align-self: center;

} */ }

2 Answers

Travis Alstrand
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Travis Alstrand
Treehouse Project Reviewer
Travis Alstrand
.a{fill-rule:evenodd;}techdegree seal-36
Travis Alstrand
Treehouse Project Reviewer

I don't have all the code in front of me to see for sure, but in general:

Using .main-header align-items: center:

  • This approach aligns all child elements of .main-header to the center along the cross-axis.

Using .main-nav align-self: center:

This approach only centers the .main-nav element within its flex container

In terms of best practices with Parent vs. Child -- Generally, it's considered better practice to set alignment on the parent container (.main-header) rather than individual children. This approach is more maintainable and consistent, especially if you have multiple child elements that need the same alignment.

In terms of Flexibility -- Using align-items on the parent provides more flexibility for future changes. If you add more elements to .main-header, they will automatically inherit the centering behavior.

But, in the end, it's up to you and your desired effect and preferences 👍

Jess W
Jess W
4,391 Points
Jess W
Jess W
4,391 Points

thank you, I appreciate the detailed response!