アクティブアイテムの前後のリスト項目を整列する

Question

垂直（ul）リスト（100％画面高さ）が固定されていて、アクティブなアイテムが1つあり、前のアイテムが上に表示され、次のアイテムが下に表示されています。しかし、これが可能かどうかはわかりません。どんな考えや提案も大歓迎です！

Answer 1

あなたは、その要素は、それが途中で内容の中心部、その後、利用可能なスペースのすべてを取るに成長持ってflex-grow: 1; display: flex; align-items: center;に能動素子を設定し、その後、display: flex; flex-direction: column;にリストを設定することができます。

* {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>