CSS全高垂直等距垂直列表

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

是FlexBox的路要走嗎？

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>

來源

2017-05-07 fightstarr20

試試吧！如果你沒有得到預期的結果，請在這裏發佈代碼。（劇透：是的，這是要走的路） – Pharaoh

利用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>

來源

2017-05-07 13:01:32 dippas

CSS全高垂直等距垂直列表

回答

相關問題