Flex column align last item to flex-end

user_9352937 0
Viewed 283

I have html like below , I want to align last item to the flex end and remaining items in flex start in flexbox column.

<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>

and Css like below

   .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);
        
        }

And the result looks like below , how do I move the item with class .last to the bottom.I tried something like below where I tried align item aswel as align content but still it does not seems to work , but it does not move the last element to the bottom.

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

enter image description here

css html
2 Answers

This should work out. I removed the spaces of the css class names.

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;
}

If you are copying the code you might have to change the class names in the css.

user_136019410

If .leftList has height: 100%; you could give the item before the .last flex-grow: 1; so he takes up al the space available.

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

I hope that this is what you were looking for.

user_115784280
Related