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

【问题标题】：Flex column align last item to flex-endFlex 列将最后一项对齐到 flex-end
【发布时间】：2021-08-19 11:44:54
【问题描述】：

我有下面这样的 html，我想将最后一项对齐到 flex 端，并将 flex 中的剩余项对齐到 flexbox 列中。

<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 类的项目移动到底部。我尝试了类似下面的方法，我尝试将项目与对齐内容对齐，但它似乎仍然不起作用，但确实如此不要将最后一个元素移到底部。

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

【问题讨论】：

标签： html css

【解决方案1】：

这应该可以解决。我删除了 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 中的类名。

【讨论】：

【解决方案2】：

如果 .leftList 的高度为：100%；您可以在 .last flex-grow: 1; 之前给出该项目所以他占用了所有可用的空间。

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

我希望这就是你要找的。p>

【讨论】：