css - 导航栏 : layout-align ="space-between stretch" doesn't behave correctly

Question

我试图将我的一些链接对齐到导航栏的顶部，并将其中一些链接(注销，进入全屏)对齐到底部:

但是如您所见，它不起作用。 这是我的导航栏 html 代码:

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

我已经尝试过向 div 添加一些“height:100%”css，但这只会导致出现不必要的滚动条。 我必须更改什么才能使这种对齐成为可能？

Answer 1

试试这个，希望对你有帮助。

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