位置flex兒童彼此相鄰與自我對齊

Question

我試圖做一個簡單的導航與下一個和上一個按鈕。先前位於容器的最左側，接下來位於最右側。我知道你在想什麼：這是使用justify-content: space-between的理想時間。但是，當用戶在第一頁或最後一頁上時，後端不會分別輸出上一個和下一個按鈕。這導致下一個按鈕在第一頁左對齊，這不是我想要的。

我以爲我可以在兒童上使用align-self。我現在遇到的問題是，第一個孩子推倒第二個孩子，我不知道如何解決這個問題。

這裏有一個片斷

.container { 
 
    display: flex; 
 
} 
 
.container * { 
 
    width: 10%; 
 
    height: 80px; 
 
} 
 
#d1 { 
 
    background: green; 
 
    align-self: flex-start; 
 
} 
 
#d2 { 
 
    background: red; 
 
    align-self: flex-end; 
 
}

<div class="container"> 
 
    <div id="d1"> 
 
    div 1 
 
    </div> 
 
    <div id="d2"> 
 
    div 2 
 
    </div> 
 
</div>

Answer 1

我完全忘了魔術利潤率彎曲。這裏所說：

.container { 
 
    display: flex; 
 
} 
 
.container * { 
 
    width: 10%; 
 
    height: 80px; 
 
} 
 
#d1 { 
 
    margin-right: auto; 
 
    background: red; 
 
} 
 
#d2 { 
 
    margin-left: auto; 
 
    background: green; 
 
}

<div class="container"> 
 
    <div id="d1"> 
 
    div 1 
 
    </div> 
 
    <div id="d2"> 
 
    div 2 
 
    </div> 
 
</div>