不要弯曲容器的属性不会应用于在其中柔性容器的孩子吗? [重复]

问题描述 投票:1回答:4

这个问题已经在这里有一个答案:

当我设置。主要头的弯曲方向上的值。主要-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;}}  
html css html5 css3 flexbox
4个回答
2
投票

弯曲方向将只适用于。主要头的孩子,而不是其他任何后代。如果添加柔性方向:。主要头,。主要-NAV {显示:弯曲;}相反,那么这将同时适用于。主要头的孩子,。主要-NAV。


1
投票

@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--> 

1
投票

不,它不是继承的属性,所以它不会传承给孩子。您可以检查,看是否有属性通过一些网站,如MDNW3School继承。

如果你希望孩子柔性容器的儿童在列排列,你必须明确再进行设置。


-1
投票

您可以通过弯曲方向继承它:继承;

© www.soinside.com 2019 - 2024. All rights reserved.