Ionische Seite Menü, wie Sie den Link am unteren Rand des Seitenmenüs

Question

Ich habe ein Seitenmenü in einer ionischen App, ich brauche Links drin, und der Link für die Abmeldung sollte am unteren Rand der sein Side-Menü, nicht sicher, wie dies zu erreichen, da die Höhe der Ion-Liste ist abhängig von der Menge der Links, die es gibt, und kann nicht mit der Position der Link selbst zu spielen, um es auf der Unterseite des Seitenmenüs.

Dies ist die Situation jetzt:

Und dies ist der html:

aktualisieren

I ionischen Standard-Tags und Klassen überschreiben mussten, so Das hat am Ende für mich funktioniert.

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

Answer 1

Sie tun könnte diese flex CSS-Eigenschaften verwenden, müssen Sie einige Klassen hinzuzufügen. Hier

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

ist die CSS:

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