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

将flex-direction:column中的ul和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>

tslint.json