这个问题已经在这里有一个答案:
当我设置。主要头的弯曲方向上的值。主要-NAV的孩子都在一排不是列。所以我在想,如果柔性容器是在柔性的容器永远不会受他们的父容器的父容器的柔性容器声明的孩子。
<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;}}
弯曲方向将只适用于。主要头的孩子,而不是其他任何后代。如果添加柔性方向:。主要头,。主要-NAV {显示:弯曲;}相反,那么这将同时适用于。主要头的孩子,。主要-NAV。
@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-->
您可以通过弯曲方向继承它:继承;