CSS Flex導航欄 - 如何？

Question

第一次玩Flex，經過大量的閱讀和玩，我還沒有設法解決這個問題。

我想要一個固定的導航欄。但這很容易，問題是如何將項目1對齊到項目2 & 3？不管我做什麼，他們都分組。 我確信你將能夠向我展示我的noob錯誤，所以我說對 - 謝謝你！

.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

您可以卸下.flex-item的div的align-self性質，而是添加margin-left: auto到第二.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>