导航栏：layout-align="space-between stretch" 行为不正确

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 添加一些“高度：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;
}

导航栏：layout-align="space-between stretch" 行为不正确

Navbar: layout-align="space-between stretch" doesn't behave correctly

css

flexbox

angular-material