对齐活动项目上方和下方的上一个和下一个列表项目

Question

我有一个固定的垂直（ul）列表（100％屏幕高度），我试图有一个活动项目，前面的项目显示在上面，下一个项目显示在下面。不过，我不确定这是否可行。任何想法或建议都非常感谢！

Answer 1

您可以将列表设置为display: flex; flex-direction: column;，然后将活动元素设置为flex-grow: 1; display: flex; align-items: center;以使该元素增长以占用所有可用空间，然后将其中心放入其中中间。

＆＃13;

＆＃13;

* {margin:0;padding:0}
ul {
  height: 100vh;
  display: flex;
  flex-direction: column;
  list-style: none;
}
.active {
  flex-grow: 1;
  display: flex;
  align-items: center;
}

＆＃13;

<ul>
  <li>foo</li>
  <li>foo</li>
  <li class="active">foo</li>
  <li>foo</li>
  <li>foo</li>
</ul>

＆＃13;

＆＃13;

＆＃13;