1
votes

Les propriétés des conteneurs flex ne s'appliquent-elles jamais aux enfants des conteneurs flex qu'elles contiennent?

Lorsque je règle la valeur flex-direction de .main-header, les enfants de .main-nav sont dans une ligne et non dans une colonne. Je me demandais donc si les enfants des conteneurs flex qui sont dans des conteneurs flex ne sont jamais affectés par les déclarations flex-container du conteneur parent de leur conteneur parent.

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

0 commentaires

4 Réponses :

-1
votes

Vous pouvez en hériter par flex-direction: inherit;

0 commentaires

1
votes

flex-direction ne s'appliquera qu'aux enfants de .main-header, pas à d'autres descendants. Si vous ajoutez plutôt flex-direction à: .main-header, .main-nav {display: flex;} à la place, alors il s'appliquera aux enfants des deux .main-header et .main-nav.

1 commentaires

ok merci pour l'aide!

0
votes

     <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 (max-width: 969px) {

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


}

0 commentaires

0
votes

Non, ce n'est pas une propriété héritée, donc elle ne sera pas transmise aux enfants. Vous pouvez vérifier si une propriété est héritée via certains sites comme MDN ou W3School .

Si vous voulez que les enfants du conteneur flex enfant s'alignent dans la colonne, vous devez le redéfinir spécifiquement.

0 commentaires