1

When I set the flex-direction value of .main-header the children of .main-nav are in a row not a column. So I was wondering if the children of flex-containers that are in flex-containers never get affected by the flex-container declarations of the parent container of their parent container.

 <header class="main-header">
    <h1 class="name"><a href="#">Best City Guide</a></h1>
    <ul class="main-nav">
        <li><a href="#">ice cream</a></li>
        <li><a href="#">donuts</a></li>
        <li><a href="#">tea</a></li>
        <li><a href="#">coffee</a></li>
    </ul> 
</header><!--/.main-header--> 


@media (min-width: 769px) {.main-header,.main-nav { display: flex;}  
                           .main-header { flex-direction: column; align-items: center;}}
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701

4 Answers4

1

flex-direction will only apply to the children of .main-header, not to any other descendants. If you add flex-direction to: .main-header, .main-nav { display: flex;} instead, then it will apply to the children of both .main-header and .main-nav.

Cristina Solana
  • 11
  • 3
0

@media (max-width: 969px) {

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


}  
     <header class="main-header">
        <h1 class="name"><a href="#">Best City Guide</a></h1>
        <ul class="main-nav">
            <li><a href="#">ice cream</a></li>
            <li><a href="#">donuts</a></li>
            <li><a href="#">tea</a></li>
            <li><a href="#">coffee</a></li>
        </ul> 
    </header><!--/.main-header-->
Rowf Abd
  • 734
  • 10
  • 21
0

No, it is not an inherited property so it won't pass down to children. You can check to see if a property is inherited through some sites like MDN or W3School.

If you want the child flex-container's children to align in column, you have to specifically set it again.

AVAVT
  • 7,058
  • 2
  • 21
  • 44
-1

You can inherit it by flex-direction: inherit;

m.s
  • 39
  • 1
  • 5