ausrichten vorherige und nächste Listenelemente oben und unten aktives Element

Question

Ich habe eine feste vertikale (ul) Liste (100% Bildschirmhöhe) und ich versuche, ein aktives Element zu haben und die vorherigen Elemente angezeigt, über und neben Elemente angezeigt unten . Ich bin mir nicht sicher, ob das möglich ist. Irgendwelche Gedanken oder Vorschläge werden sehr geschätzt!

Answer 1

Sie können die Liste auf display: flex; flex-direction: column; eingestellt, stellen Sie dann das aktive Element zu flex-grow: 1; display: flex; align-items: center; dieses Element zu haben, wachsen alle verfügbaren Platz einnehmen, dann zentrieren Inhalt in der Mitte ist.

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