Navbar：layout-align =＆＃34; space-between stretch＆＃34;没有正常行为

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>

我已经尝试添加一些＆＃34;身高：100％＆＃34; css到div但是只完成了一个不必要的滚动条出现。 我需要更改什么才能使这种对齐成为可能？

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