如何将最后一个列表项与响应定位底部对齐

Question

我在窗口的左侧有一个导航列，我需要将最后一个导航项定位在该列的底部。然而，如果窗口的大小和高度减小，我也需要该项目移动到倒数第二个列表项目下方的正常位置。

我正在使用React和Material UI的List和ListItem组件来创建这个导航列。它们呈现为内部带有<li>标记的<ul>。

我尝试在最后一个<li>标记上使用position:fixed，bottom:0，它将其正确地定位在底部，但当调整窗口大小时，它会与其他列表项重叠。

我还尝试将<ul>设置为显示：flex，flex direction:列，然后将最后一个<li>页边空白顶部设置为某个值。。。但我真的不想为它设定一个值，因为它应该是响应性的。

这是我所做的最接近的——CodeSandbox。我可以使用什么CSS来制作底部的最后一个列表项，并在调整屏幕/窗口大小时将其向上移动？

Answer 1

flex即将实现。在最后一个<li>:上使用margin-top:auto

html {height:100%}
body {
width: 50%;
height: 100%;
}
ul {
height:100%;
margin: 0;
padding: 0;
list-style-type: none;
display: flex;
flex-direction: column;
}
li {
border: solid;
padding: 0.5rem;
}
li:last-of-type {margin-top:auto}

<ul>
<li>ITEM</li>
<li>ITEM</li>
<li>ITEM</li>
<li>ITEM</li>
<li class="right">THIS ONE FLEX END</li>
</ul>