CSS Flex navbar - comment?

Question

Première fois que je jouais avec Flex et après beaucoup de lecture et de lecture, je n'ai toujours pas réussi à résoudre ce problème.

Je veux une barre de navigation qui est corrigée. Mais c'est facile, le problème est comment puis-je aligner l'article 1 pour commencer fr Item 2 & 3 jusqu'à la fin? Peu importe ce que je fais, ils sont regroupés. Je suis sûr que vous serez en mesure de me montrer mon erreur noob donc pour que je dis bien - merci!

.flex-container { 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    -webkit-flex-direction: row; 
 
    flex-direction: row; 
 
    width: 100vw; 
 
    height: 8vh; 
 
    background-color: lightgrey; 
 

 
} 
 

 
.flex-item { 
 
    align-self: flex-start; 
 
    -webkit-align-self: flex-end; 
 
} 
 

 
.item1 { 
 
    background-color: cornflowerblue; 
 
    width: 200px; 
 
    height: 5vh; 
 
    align-self: flex-start; 
 
    -webkit-align-self: flex-start; 
 
} 
 

 
.item2 { 
 
    background-color: red; 
 
    width: 100px; 
 
    height: 5vh; 
 
    align-self: flex-end; 
 
    -webkit-align-self: flex-end; 
 
} 
 

 
.item3 { 
 
    background-color: yellow; 
 
    width: 100px; 
 
    height: 5vh; 
 
    align-self: flex-end; 
 
    -webkit-align-self: flex-end; 
 
}

<div class="flex-container"> 
 
    <div class="flex-item item1">flex item 1</div> 
 
    <div class="flex-item item2">flex item 2</div> 
 
    <div class="flex-item item3">flex item 3</div> 
 
</div>

Answer 1

Vous pouvez supprimer les align-self propriétés sur les .flex-item divs, et au lieu d'ajouter margin-left: auto au deuxième .flex-item

.flex-container { 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    -webkit-flex-direction: row; 
 
    flex-direction: row; 
 
    width: 100vw; 
 
    height: 8vh; 
 
    background-color: lightgrey; 
 
} 
 

 
.item1 { 
 
    background-color: cornflowerblue; 
 
    width: 200px; 
 
    height: 5vh; 
 
} 
 

 
.item2 { 
 
    background-color: red; 
 
    width: 100px; 
 
    height: 5vh; 
 
    margin-left: auto; 
 
} 
 

 
.item3 { 
 
    background-color: yellow; 
 
    width: 100px; 
 
    height: 5vh; 
 

 
}

<div class="flex-container"> 
 
    <div class="flex-item item1">flex item 1</div> 
 
    <div class="flex-item item2">flex item 2</div> 
 
    <div class="flex-item item3">flex item 3</div> 
 
</div>