ReactJS中ProSidebar用justify-content无法将Footer置于侧边栏底部

你遇到的问题是由ProSidebar默认样式优先级覆盖自定义样式、子元素高度配置错误共同导致的，按以下步骤修改即可：

调整CSS样式（Sidebar.css） #

/* 首先覆盖ProSidebar默认内部容器样式，这是多数人容易遗漏的点 */
.ProSidebar, .ProSidebar .pro-sidebar-inner {
  height: 100%;
  display: flex;
  flex-direction: column;
  background-image: url("../resource/side-bg.png");
  background-size: cover;
  font-size: larger;
  text-align: center;
  color: whitesmoke;
}

.Header {
  display: flex;
  padding: 5% 0;
  align-content: center;
  justify-content: center;
  /* 移除错误的flex:1 和 height:100% 避免Header异常撑开 */
}

.Menu {
  /* flex:1 会让内容区自动占满剩余可用空间，自然把Footer挤到底部 */
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0;
  /* 移除错误的height:100% */
}

.Footer {
  display: flex;
  flex-direction: column;
  padding: 5% 0;
  /* 移除错误的flex:1、align-self:flex-end，不需要额外属性 */
}

关键问题说明 #

1. 原代码中给Header、Menu都设置了height:100%，导致两个区块异常撑满侧边栏高度，Footer被挤到可视区域外
2. ProSidebar默认内置.pro-sidebar-inner容器，默认非flex布局，仅给外层.ProSidebar加flex属性不会生效
3. 列方向flex布局下给Footer设置align-self: flex-end只会让Footer横向靠右，不会实现纵向靠下的效果

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