Positionnement de navbar avec flexbox

Version imprimable

2 pièce(s) jointe(s)

Bonsoir

J ai du mal a appréhender quelques notions basique de flexbox

je suis une formation je dois positionner des éléments d une navbar

Pièce jointe 628041
Code:

1 2 3 4 5 6 7 8 <nav class="nav-2"> <a href="#">Home</a> <a href="#">Services</a> <a href="#">Contact</a> <button class="sign-in-btn">Se connecter</button> <button class="sign-up-btn">S'inscrire</button> </nav>
je dois Centrer sur Y et afficher les boutons à droite

la solution propose dans la formation

est :
Code:

1 2 3 4 5 .nav-2{ display: flex; align-items: center; }
mais dans vscode j obtiens rien
en revanche quand je rentre ca :
Code:

1 2 3 4 5 .nav-2{ display: flex; justify-content: center; }
j'obtiens :Pièce jointe 628042

pourrais je avoir des explications j'en conviens c est une question de bougre de débutant)

Hello labarre2002,

Juste une idée comme cela. J'ai encadré les boutons avec une div et ensuite la positionnée. Bien sur, il existe d'autre moyen, mais c'est une piste.

Code:

1
2
3
4
5
6
7
8
9
10
11
<nav class="nav-2">      
        <a href="#">Home</a>
        <a href="#">Services</a>
        <a href="#">Contact</a>
 
    <div class="div-droite">
        <button class="sign-in-btn">Se connecter</button>
        <button class="sign-up-btn">S'inscrire</button>
    </div>  
 
    </nav>

Et pour la css

Code:

1
2
3
4
5
6
7
8
9
10
11
.nav-2{
    display: flex;    
    justify-content: left;
    width: 100%;
    gap: 50px;
}
.div-droite{   
    display: flex;
    margin-left: auto;
    gap: 50px;
}

Bonjour,

Vous pouvez aussi utiliser flex-end :

Code:

1
2
3
4
5
.div-droite {
    display: flex;
    justify-content: flex-end;
    flex: 1;
}