如何实现侧边栏顶部图标单独置顶、UL列表垂直居中的flex布局

你当前代码的问题集中在flex属性的错误使用上：

• justify-content 是flex容器专属属性，仅对设置了display: flex的元素生效，你直接把该属性写在.icons_ul、.toplefticon这类普通块元素上，不会触发任何布局效果
• 没有为承载图标列表的.mainIcons容器分配侧边栏的剩余高度，它默认仅包裹内容高度，自然无法实现列表整体在侧边栏垂直居中的效果

仅需修改你的(S)CSS代码，新增/调整如下部分即可，原有其他代码无需改动：

.toplefticon {
  /* 可根据视觉需求调整顶部logo的上下边距 */
  margin: 1em 0;
}

.mainIcons {
  /* 占满侧边栏除顶部logo外的所有剩余高度 */
  flex: 1;
  /* 设为flex容器，纵向排列，让内部的图标列表垂直居中 */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

修改后即可实现顶部logo固定在侧边栏上方，图标列表整体在侧边栏垂直居中的目标效果。

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