layout-align =＆＃34; space-around＆＃34;在chrome和safari中不起作用

Question

我正在使用Angular材料进行侧边菜单。菜单有5个图标，四个在顶部，然后是一个弯曲的跨度，然后是底部的图标。我是在layout="column"上使用space-around来完成的。它应该像第一张图片一样，就像在Firefox中一样，但在Chrome和Firefox中看起来不像这样，如第二张图所示。

Firefox： Chrome和Safari：

有人知道为什么它会在Chrome和Safari中执行此操作吗？我认为<md-sidenav class="md-sidenav-left darkgrey-bkgr {{mainVC.menuOpen}}" md-is-locked-open="true" md-disable-backdrop ng-mouseover="mainVC.openMenu()" ng-mouseleave="mainVC.closeMenu()"> <div class="innerDiv" layout="column"> <md-toolbar> <div class="md-toolbar-tools" flex="100"> <md-icon md-svg-src="images/logo.svg"> </md-icon> <p class="no-margin-tb margin-lx">text</p> <span flex></span> </div> </md-toolbar> <div layout="column" layout-align="space-around start" flex="100"> <div layout="row" layout-align="center center"> <md-button class="md-icon-button white-text" id="DOC-bn"><i class="material-icons">map</i></md-button> <label for="DOC-bn"> <p class="md-body-2 no-margin-tb"> DOC </p> </label> </div> <div layout="row" layout-align="center center"> <md-button class="md-icon-button white-text" id="dashboard-bn"><i class="material-icons">dashboard</i></md-button> <label for="dashboard-bn"> <p class="md-body-2 no-margin-tb"> Dashboard </p> </label> </div> <div layout="row" layout-align="center center"> <md-button class="md-icon-button white-text" id="profile-bn"><i class="material-icons">account_box</i></md-button> <label for="profile-bn"> <p class="md-body-2 no-margin-tb"> Profile </p> </label> </div> <div layout="row" layout-align="center center"> <md-button class="md-icon-button white-text" id="settings-bn"><i class="material-icons">settings</i></md-button> <label for="settings-bn"> <p class="md-body-2 no-margin-tb"> Settings </p> </label> </div> <span flex="30"></span> <div layout="row" layout-align="center center"> <md-button class="md-icon-button white-text" id="logout-bn"><i class="material-icons">exit_to_app</i></md-button> <label for="logout-bn"> <p class="md-body-2 no-margin-tb"> Logout </p> </label> <p class="md-body-1 no-margin-tb margin-lx italic"> Text </p> </div> </div> </div> </md-sidenav> 不起作用..为什么？如何在其他浏览器中使它看起来像Firefox，没有重大黑客攻击...谢谢！

是的，我应该告诉你这是菜单的非扩展版本，你可能会看到html中有更多版本。菜单会在悬停时展开，并且使用函数和某些css进行扩展，但这与此错误无关。如果我删除所有其他功能，图标的间隔方式相同。

你在下面看到我的HTML：

var gridView = new GridView();
            this.lvWorkers.View = gridView;
            foreach(string c in columnName)
            {
                gridView.Columns.Add(new GridViewColumn
                {
                    Header = c.Remove(0, 5),
                    DisplayMemberBinding = new Binding(c)
                });
            }

Answer 1

您的父容器必须使用所有可用空间。在您的代码中，您没有使用它。

  <div class="innerDiv" layout="column">

此外，大多数情况下此面板不应该有滚动条，因此更好地使用md-content就是这种情况。我强烈建议不要在每个浏览器上使用layout-align作为其实现更改。尝试使用

<span flex></span>

这些间距。

这是您完整的工作代码。

 <md-sidenav class="md-sidenav-left darkgrey-bkgr {{mainVC.menuOpen}}" md-is-locked-open="true" md-disable-backdrop ng-mouseover="mainVC.openMenu()" ng-mouseleave="mainVC.closeMenu()" flex>

<md-toolbar>
  <div class="md-toolbar-tools" flex="100">
    <md-icon  md-svg-src="images/logo.svg">
    </md-icon>
    <p class="no-margin-tb margin-lx">text</p>
    <span flex></span>
  </div>
</md-toolbar>
<md-content layout="column" flex layout-align="space-around start" style='background-color:red'>
  <div layout="row" layout-align="center center">
    <md-button class="md-icon-button white-text" id="DOC-bn"><i class="material-icons">map</i></md-button>
    <label for="DOC-bn">
      <p class="md-body-2 no-margin-tb">
        DOC
      </p>
    </label>
  </div>
  <div layout="row" layout-align="center center">
    <md-button class="md-icon-button white-text" id="dashboard-bn"><i class="material-icons">dashboard</i></md-button>
    <label for="dashboard-bn">
      <p class="md-body-2 no-margin-tb">
        Dashboard
      </p>
    </label>
  </div>
  <div layout="row" layout-align="center center">
    <md-button class="md-icon-button white-text" id="profile-bn"><i class="material-icons">account_box</i></md-button>
    <label for="profile-bn">
      <p class="md-body-2 no-margin-tb">
        Profile
      </p>
    </label>
  </div>
  <div layout="row" layout-align="center center">
    <md-button class="md-icon-button white-text" id="settings-bn"><i class="material-icons">settings</i></md-button>
    <label for="settings-bn">
      <p class="md-body-2 no-margin-tb">
        Settings
      </p>
    </label>
  </div>
  <span flex="30"></span> // here use flex only and remove layout-align option if possible
  <div layout="row" layout-align="center center">
    <md-button class="md-icon-button white-text" id="logout-bn"><i class="material-icons">exit_to_app</i></md-button>
    <label for="logout-bn">
      <p class="md-body-2 no-margin-tb">
        Logout
      </p>
    </label>
    <p class="md-body-1 no-margin-tb margin-lx italic">
      Text
    </p>
  </div>
</md-content>

这是一个工作链接。 http://codepen.io/next1/pen/qNEZZM

http://codepen.io/next1/pen/qNEZZM