如何让高度100%的容器内列表项垂直铺满并均匀分布？

刚好你已经用了Flex布局，只需要加几个属性就能搞定这个需求，分两种场景给你方案：

场景1：让图标垂直均匀分布（间距自动填充） #

如果你希望图标之间的空隙自动分配，让整个列表撑满侧边栏高度，只需要给你的垂直Flex容器（也就是图标列表的父容器）加上justify-content属性：

/* 你的侧边栏容器，确保它有明确高度 */
.sidebar {
  height: 100vh; /* 或者继承父元素高度：height: 100%; 前提是父元素有高度 */
  display: flex;
  flex-flow: column;
  /* 关键属性：均匀分布，上下两端对齐，中间空隙均分 */
  justify-content: space-between;
  /* 可选：如果希望上下也有间距，用space-around或space-evenly */
  /* justify-content: space-around; */
  /* justify-content: space-evenly; */
}

• space-between：第一个图标靠顶部，最后一个靠底部，中间图标之间的空隙相等
• space-around：每个图标上下都有相等的空隙，整体上下也会有间距
• space-evenly：所有空隙（包括上下边缘和图标之间）都完全相等

场景2：让每个图标项拉伸铺满高度 #

如果你希望每个图标本身的容器（列表项）都拉伸，占满侧边栏高度的均分份额，那需要给每个列表项添加flex: 1属性：

.sidebar {
  height: 100vh;
  display: flex;
  flex-flow: column;
}

.icon-item {
  /* 关键属性：让每个item均分容器高度 */
  flex: 1;
  /* 可选：让图标在item内部居中，看起来更美观 */
  display: flex;
  align-items: center;
  justify-content: center;
}

这样每个列表项会自动平分侧边栏的高度，即使你新增/删除图标，也会自动调整。

注意事项 #

• 一定要确保侧边栏容器有明确的高度，比如height: 100vh（占满视口高度）或者height: 100%（前提是它的父元素已经设置了高度，比如body和html要加height: 100%）
• 如果侧边栏还有其他内容（比如标题、底部按钮），可以把图标列表单独放在一个子容器里，给这个子容器加flex: 1和display: flex; flex-flow: column; justify-content: space-between;，这样图标列表会占满剩余空间

举个完整的小例子：

<div class="sidebar">
  <h3>侧边栏标题</h3>
  <ul class="icon-list">
    <li class="icon-item">📁</li>
    <li class="icon-item">📝</li>
    <li class="icon-item">🔍</li>
    <li class="icon-item">⚙️</li>
  </ul>
  <div class="sidebar-footer">退出</div>
</div>

html, body {
  height: 100%;
  margin: 0;
}

.sidebar {
  width: 60px;
  height: 100%;
  background: #f0f0f0;
  display: flex;
  flex-flow: column;
  padding: 10px 0;
}

.icon-list {
  flex: 1; /* 让图标列表占满侧边栏的剩余高度 */
  display: flex;
  flex-flow: column;
  justify-content: space-evenly; /* 均匀分布图标 */
  list-style: none;
  padding: 0;
  margin: 0;
}

.icon-item {
  text-align: center;
  font-size: 24px;
}

.sidebar-footer {
  text-align: center;
  padding: 10px;
  font-size: 12px;
}

这样就能完美实现你要的效果啦！

内容的提问来源于stack exchange，提问作者Wovasteen Gova