활성 아이템 위와 아래의 이전 목록 항목과 아래 목록 항목 맞추기

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>