align-selfでお互いにフレックスを置く

Question

私は、次のボタンと前のボタンで簡単にナビをしようとしています。前はコンテナの左端にあり、次に右端にあります。私はあなたが考えていることを知っています：これはjustify-content: space-betweenを使用するのに最適な時間です。ただし、ユーザーが最初のページまたは最後のページにいる場合、バックエンドはそれぞれ前のボタンと次のボタンを出力しません。これにより、次のボタンが最初のページの左に揃えられます。これは私が望むものではありません。

子供にalign-selfを使用できると思いました。私が今直面する問題は、最初の子供が2番目の子供を押して、これを解決する方法を知らないということです。

は、ここで私は完全にフレックスで魔法の余白を忘れスニペット

.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>