位置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>