Interprétation sur mise en place d'une flexbox

header en flexbox

13 juillet 2023 à 15:04:41

Bonjour à tous,

j'ai une question sur les flexbox et leurs interprétations dans un cas précis.

j'ai plus que galéré pour faire un Header avec un simple menu et image. Mais je débute donc j'y vais à tâtons en essayant plusieurs solutions

J'ai réussi à faire un header avec dedans :

-une image bien à gauche dans une div

- un menu bien à droite dans une nav en liste

  <header class="entete">
            <div >
                <img src="images/logo/nch.jpg">
            </div>
            <nav>
                <ul>
                    <li><a href="#">Affiche</a></li> 
                    <li> <a href="#">Dépliant</a></li> 
                    <li> <a href="#">catalogue</a></li> 
                </ul>
            </nav>
        </header>

.entete {
    display: flex;
    /* flex-direction:row; */
    justify-content:space-between;
    align-items: center;
    }

ul {display: flex;
    /* flex-direction : row; */ 
    /* justify-content: end; */
}

J'indique bien que mon header est une flexbox mais au lieu de mettre justify-content en flex-start je le mets en space between pour le forcer à s'étirer. Ca c'est ok. j'ai mis en commentaire ce qui finalement n'est pas nécessaire

Mais c'est pour ma nav, j'ai deux questions :

1- pourquoi dois je redire à ma liste ul que c'est un display flex, elle est contenu dans mon header ?

2- pourquoi le display se fait sur ul et pas sur nav ?

si je le fais sur la nav ma liste n'est plus à l'horizontal mais cela marche si je supprime ma liste ul et li.

En espérant avoir été clair.

Chevalier Nicolas

uniuc

13 juillet 2023 à 15:34:09

Bonjour,

Une seule réponse à tes deux questions.

Parce que flex ne va pas au delà du 1er enfant.

si tu colle flex sur nav il ne touchera que <ul> mais pas <li>.

Si tu veux toucher <li> tu dois appliquer flex sur son parent, dans le cas de <li> le parent c'est <ul>

NicolasChevalier21

13 juillet 2023 à 16:27:43

Ha je te remercie, c'est dur de tout retenir au début.

Chevalier Nicolas

uniuc

13 juillet 2023 à 18:02:54

Oui je sais,

Mais ça viens avec la pratique

Bon courage.

-
Edité par uniuc 13 juillet 2023 à 18:03:28