Discussion :

[labarre2002]

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 css :

Sélectionner tout - Visualiser dans une fenêtre à part

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 css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
.nav-2{
display: flex;
justify-content: center;
 
}

j'obtiens :

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

[gesualda]

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 css :

Sélectionner tout - Visualiser dans une fenêtre à part

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;
}

[Toufik83]

Bonjour,

Vous pouvez aussi utiliser flex-end :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

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