如何使用响应式定位将最后一个列表项与底部对齐答案

【问题标题】：How to align last list item to bottom with responsive positioning如何使用响应式定位将最后一个列表项与底部对齐
【发布时间】：2021-02-18 10:21:09
【问题描述】：

我在窗口左侧有一个导航栏，我需要将最后一个导航项放在栏的底部。但是，如果调整窗口大小并且高度减小，我还需要将该项目移至倒数第二个列表项下方的正常位置。

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

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

我也尝试将 <ul> 设置为 display: flex, flex-direction: column 然后将最后一个 <li> margin-top 设置为某个值...但我真的不想设置这样做的价值，因为它应该是响应式的。

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

【问题讨论】：

标签： html css

【解决方案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>

【讨论】：