Flex Column布局中实现最后一个子元素对齐至flex-end的解决方案

我来帮你搞定这个Flex布局的问题！你现在的核心问题在于Flex容器没有占满父元素的高度，而且子元素的flex属性干扰了空间分配，导致margin-top:auto没法发挥作用。咱们一步步来调整：

问题分析 #

1. .leftlist作为Flex容器，没有设置height: 100%，它的高度只由子元素内容撑开，所以没有多余空间让margin-top:auto把最后一个元素推到底部。
2. .lefticons的flex:1 1 auto会让每个子元素自动填充容器的剩余空间，导致所有元素都被拉伸，没法实现“顶部元素堆叠，最后一个到底部”的效果。

修改方案 #

只需要调整以下3处CSS：

1. 让Flex容器占满父容器高度 #

给.leftlist添加height: 100%，确保它能利用.container的整个高度：

.leftlist {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  height: 100%; /* 新增这一行 */
}

2. 移除子元素的flex属性 #

删掉.lefticons里的flex:1 1 auto，让子元素只根据自身内容高度显示：

.lefticons {
  cursor: pointer;
  /* 移除 flex: 1 1 auto; */
  width: 100%;
  font-size: 22px;
  text-align: center;
  padding: 12px 3px;
  color:#ff5722;
  margin: auto;
  border-bottom: 1px solid rgb(233, 233, 233);
}

3. 简化.last类的样式 #

在column方向的Flex布局中，margin-top:auto就足够把元素推到底部，不需要多余的属性：

.last {
  margin-top: auto;
  /* 移除 align-self: flex-end; 和 align-content: flex-end; */
}

修改后的完整CSS #

.container { 
 left: 0; 
 z-index: 2; 
 position: fixed; 
 height: 100%; 
 width: $leftbarwidth; 
 border-right: 1px solid rgb(233, 233, 233); 
 background-color: rgb(255, 255, 255); 
} 
.leftlist { 
 display: flex; 
 flex-flow: column nowrap; 
 align-items: center;
 height: 100%; /* 新增 */
} 
.lefticons { 
 cursor: pointer; 
 /* flex: 1 1 auto; 移除 */
 width: 100%; 
 font-size: 22px; 
 text-align: center; 
 padding: 12px 3px; 
 color:#ff5722; 
 margin: auto; 
 border-bottom: 1px solid rgb(233, 233, 233); 
}
.last { 
 margin-top:auto; 
}

这样调整后，前两个.lefticons会堆叠在容器顶部，带有.last类的元素会被margin-top:auto推到容器底部，完美实现你的需求~

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