jquery - 在事件元素上方和下方对齐上一个和下一个列表元素

Question

我有一个固定的垂直 (ul) 列表(100% 屏幕高度)，我试图让一个事件元素显示在上方，下一个元素显示在下方。不过，我不确定这是否可能。非常感谢任何想法或建议!

Answer 1

您可以将列表设置为display: flex; flex-direction: column;，然后将事件元素设置为flex-grow: 1;显示: flex ； align-items: center; 让该元素增长以占据所有可用空间，然后将其内容居中。

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

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