CSS全高垂直等距垂直列表

Question

我正在嘗試創建全屏垂直導航疊加。

我想使ul容器在頁面的整個高度，然後等於每個li。這個列表並不是一個固定的數量，所以尋找可以動態調整大小的東西。

是FlexBox的路要走嗎？

https://jsfiddle.net/w3hppLss/

html, body{margin:0;padding:0;} 
 
ul{list-style:none;height:100vh;} 
 
li{background:grey;margin-bottom:5px;}

<ul> 
 
    <li>Item 1</li> 
 
    <li>Item 2</li> 
 
    <li>Item 3</li> 
 
    <li>Item 4</li> 
 
    <li>Item 5</li> 
 
</ul>

Answer 1

利用Flexbox，就在ulflex-direction:column和flex:1在li

html, 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
ul { 
 
    list-style: none; 
 
    height: 100vh; 
 
    background: red; 
 
    margin: 0; 
 
    padding: 0; 
 
    display: flex; 
 
    flex-direction: column 
 
} 
 

 
li { 
 
    flex: 1; 
 
    background:gray; 
 
    margin: 5px 
 
}

<ul> 
 
    <li>Item 1</li> 
 
    <li>Item 2</li> 
 
    <li>Item 3</li> 
 
    <li>Item 4</li> 
 
    <li>Item 5</li> 
 
</ul>