javascript - Ionic side menu, how to place the link at the bottom of the side menu -

i have side menu in ionic app, need have links in it, , link logout should @ bottom of side menu, not sure how achieve this, since ion-list height depended on amount of links there are, , can't play position of link place @ bottom of side menu.

this situation now:

and html:

<ion-side-menu side="left" class="side-menu" scroll="false">       <ion-content>         <ion-list>           <ion-item ui-sref="">             min profil           </ion-item>           <ion-item ui-sref="main.logout" class="logout">             logg out           </ion-item>         </ion-list>       </ion-content>     </ion-side-menu> 

update

i had overwrite ionic default tags , classes, worked me in end.

html:

<ion-side-menu side="left" class="side-menu" scroll="false">       <ul class="menu">         <div class="side-menu-header">         </div>         <div class="menu-main">           <li>             <a ui-sref="">min profil</a>           </li>         </div>         <div class="menu-last">           <li>             <a ui-sref="main.logout">logg out</a>           </li>         </div>       </ul>     </ion-side-menu> 

css:

.menu {     height: 100%;     display: flex;     flex-direction: column;     justify-content: space-between;    ,a {     background-color: $dark-background-color;     color:$light;     text-decoration: none;     font-size: 1rem;     }      .side-menu-header {       height: 60px;     }      .menu-main {       position: absolute;       top: 60px;       margin: 15px;        li {         margin: 5px 0 5px 0;       }     }      .menu-last {       margin: 15px;     } } 

you using flex css properties, need add classes.

<ion-list class="menu">     <div class="menu-main">         <ion-item ui-sref="">             min profil         </ion-item>         <!-- place other items here -->     </div>     <div class="menu-last">         <ion-item ui-sref="main.logout" class="logout">             logg out         </ion-item>     </div> </ion-list> 

here css :

.menu {     height: 100%;     display: flex;     flex-direction: column;     justify-content: space-between; }