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

Question

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

Answer 1

您可以将列表设置为display: flex; flex-direction: column;，那么有源元件设置为flex-grow: 1; display: 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>