layout-align =「space-around」在Chrome和safari中不起作用

Question

我正在做一個側面菜單，使用Angular材質。菜單上有5個圖標，上面四個圖標，然後是一個可以彎曲的跨度，然後是底部的圖標。我通過使用layout-align="space-around start"在layout="column"上執行此操作。它應該看起來像第一張圖片，就像它在Firefox中所做的一樣，但在Chrome和Firefox中看起來並不像這樣，如第二張圖所示。

火狐： Chrome和Safari瀏覽器：

是否有人知道爲什麼它這樣做在Chrome和Safari？我認爲space-around不起作用。爲什麼？我怎樣才能讓它看起來像在其他瀏覽器的Firefox中，沒有大的黑客攻擊......謝謝！

是的，我應該告訴你，這是菜單的非擴展版本，你可能會看到在HTML中有更多。該菜單擴展懸停，這是用一個函數和一些CSS，但這是無關的這個錯誤。如果我刪除所有其他功能，圖標的間距也是相同的。

你看我下面的html：

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

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> 

這裏是一個workgin鏈接。 http://codepen.io/next1/pen/qNEZZM

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