Navbar: layout-align = "space-between stretch" doğru davranmıyor

Question

Bağlantılarımdan bazılarını navbarın üst kısmına hizalamaya çalışıyorum ve bunlardan bazıları (Logout, Fullscreen):

Ama gördüğünüz gibi çalışmıyor. div öğelerine css ama bu sadece gereksiz bir kaydırma çubuğu ortaya çıktığı gerçekleştirilir:

<section layout="row" flex> 
    <md-sidenav class="md-sidenav-left md-whiteframe-z2" md-component-id="left" layout-align="space-between stretch" flex> 
     <md-toolbar class="md-theme-indigo" layout="row"> 
      <h1 class="md-toolbar-tools">Menu</h1> 
      <span flex></span> 
      <md-button class="md-icon-button" aria-label="close" ng-click="close()"> 
       <md-icon md-svg-icon="assets/img/closeNavbar.svg"></md-icon> 
      </md-button> 
     </md-toolbar> 
     <div layout="column" layout-align=" center"> 
      <md-button ui-sref-active="active" ng-click="close()" layout-align=" center" style="text-align:left" ui-sref="insurance.overview">Overview</md-button> 
      <md-button ui-sref-active="active" ng-click="close()" layout-align=" center" style="text-align:left" ui-sref="insurance.caseOverview">Cases</md-button> 
      <md-button ui-sref-active="active" ng-click="close()" layout-align=" center" style="text-align:left" ui-sref="insurance.errorTotal">Total Errors</md-button> 
      <md-button ui-sref-active="active" ng-click="close()" layout-align=" center" style="text-align:left" ui-sref="insurance.totalVehicles">Total Vehicles</md-button> 
      <md-button ui-sref-active="active" ng-click="close()" layout-align=" center" style="text-align:left" ui-sref="insurance.errorTotalDonuts">Error Types</md-button> 
      <md-button ui-sref-active="active" ng-click="close()" layout-align=" center" style="text-align:left" ui-sref="insurance.mapCluster">Map</md-button> 
      <md-button ui-sref-active="active" ng-click="close()" layout-align=" center" style="text-align:left" ui-sref="insurance.mapLive">Live Map</md-button> 
      <md-button ui-sref-active="active" ng-click="close()" layout-align=" center" style="text-align:left" ui-sref="insurance.manufacturers">Manufacturers</md-button> 
     </div> 

     <div layout="column" layout-align=" center" flex> 
      <md-button ng-click="close()" layout-align=" center" style="text-align:left" ui-sref="login">Logout</md-button> 
      <md-button ng-click="toggleFullscreen()" layout-align=" center" style="text-align:left">{{fullscreenButtonLabel}}</md-button> 
     </div> 

    </md-sidenav> 

</section> 

Zaten bazı "% 100 yükseklik" eklemeye çalıştı: Bu gezinme çubuğu benim html kodudur. Bu hizalamayı yapmak için neyi değiştirmek zorundayım?

Answer 1

bunu deneyin, umarım yardımcı olur.

<section layout="row" flex> 
    <md-sidenav class="md-sidenav-left md-whiteframe-z2" md-component-id="left" layout-align="space-between stretch" flex> 
     <md-toolbar class="md-theme-indigo" layout="row"> 
      <h1 class="md-toolbar-tools">Menu</h1> 
      <span flex></span> 
      <md-button class="md-icon-button" aria-label="close" ng-click="close()"> 
       <md-icon md-svg-icon="assets/img/closeNavbar.svg"></md-icon> 
      </md-button> 
     </md-toolbar> 
     <div layout="column" layout-align=" center"> 
      <md-button ui-sref-active="active" ng-click="close()" layout-align=" center" style="text-align:left" ui-sref="insurance.overview">Overview</md-button> 
      <md-button ui-sref-active="active" ng-click="close()" layout-align=" center" style="text-align:left" ui-sref="insurance.caseOverview">Cases</md-button> 
      <md-button ui-sref-active="active" ng-click="close()" layout-align=" center" style="text-align:left" ui-sref="insurance.errorTotal">Total Errors</md-button> 
      <md-button ui-sref-active="active" ng-click="close()" layout-align=" center" style="text-align:left" ui-sref="insurance.totalVehicles">Total Vehicles</md-button> 
      <md-button ui-sref-active="active" ng-click="close()" layout-align=" center" style="text-align:left" ui-sref="insurance.errorTotalDonuts">Error Types</md-button> 
      <md-button ui-sref-active="active" ng-click="close()" layout-align=" center" style="text-align:left" ui-sref="insurance.mapCluster">Map</md-button> 
      <md-button ui-sref-active="active" ng-click="close()" layout-align=" center" style="text-align:left" ui-sref="insurance.mapLive">Live Map</md-button> 
      <md-button ui-sref-active="active" ng-click="close()" layout-align=" center" style="text-align:left" ui-sref="insurance.manufacturers">Manufacturers</md-button> 
     </div> 

     <div class="logout" layout="column" layout-align=" center" flex> 
      <md-button ng-click="close()" layout-align=" center" style="text-align:left" ui-sref="login">Logout</md-button> 
      <md-button ng-click="toggleFullscreen()" layout-align=" center" style="text-align:left">{{fullscreenButtonLabel}}</md-button> 
     </div> 

    </md-sidenav> 

</section> 

.md-sidenav-left{ 
position:relative; 
} 

.logout{ 
    position:absolute; 
    bottom:0; 
}