Flex列将最后一项对齐到flex-end

Question

我有下面这样的html，我想在flexbox列中将flex开始中的最后一项与flex结束和剩余项对齐。

<div class="container">
    <div class="leftlist">
    
        <div class="watchlist lefticons">
            <i class="fas fa-bookmark"></i>
    
        </div>
    
        <div class="watchlist lefticons">
            <i class="fas fa-user"></i>
    
        </div>
    
        <div class="watchlist lefticons last">
            <i class="fas fa-sign-out-alt"></i>
        </div>
    
    </div>
</div>

和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;
        }
        
        .lefticons
        {
            cursor: pointer;
        flex: 1 1 auto;
        width: 100%;
        font-size: 22px;
        text-align: center;
        padding: 12px 3px;
        color:#ff5722;
        text-align: center;
        margin: auto;
        border-bottom: 1px solid rgb(233, 233, 233);
        
        }
        
 

结果如下所示，如何使用类移动项目。倒数第二。我尝试了下面这样的方法，我尝试了对齐项目和对齐内容，但它似乎仍然不起作用，但它不会将最后一个元素移到底部。

   .last
    {
        margin-top:auto;
        align-self: flex-end;
        align-content: flex-end;
    }

Answer 1

如果leftList具有高度：100%；你可以在比赛前把物品交给我。最后一步：1；所以他占据了所有可用的空间。

.leftList {
  height: 100%;
}
.leftList .lefticons:nth-child(2) { // You could also give the second icon a seperate class
  flex-grow: 1;
}

我希望这就是你要找的。

Answer 2

这应该行得通。我删除了css类名的空格。

HTML

<div class="watchlist lefticons">
            <i class="fas fa-bookmark">Text</i>
    
        </div>
    
        <div class="watchlist-lefticons">
            <i class="fas fa-user">Text</i>
    
        </div>
    
        <div class="watchlist-lefticons-last">
            <i class="fas fa-sign-out-alt">Text</i>
      </div>

CSS

.watchlist-lefticons-last {
  position:absolute;
  bottom:0;
  height:60px;
}

如果要复制代码，则可能需要更改css中的类名。