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

Question

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; 
}
*/
}

Travis Alstrand · Answer

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 · Answer

thank you, I appreciate the detailed response!

Bienvenido a la Comunidad de Treehouse

¿Buscas aprender algo nuevo?

Jess W

Jess W

Establecer .main-nav en align-self: center; versus el padre .main-header align-items: center;

2 Respuestas

Travis Alstrand

Travis Alstrand

Jess W

Jess W