layout-align = "space-around"はクロムとサファリでは機能しません

Question

角度のある素材を使用してサイドメニューを作成しています。メニューには5つのアイコンがあり、上に4つ、次に下にアイコンがあります。 layout="column"でlayout-align="space-around start"を使用して行います。 Firefoxの場合と同様に、最初の画像のように見えるはずですが、2番目の画像に示すように、ChromeやFirefoxではこのようには見えません。

のFirefox： ChromeとSafariの：

それはChromeとSafariでこれを行い、なぜ誰かが知っていますか？私はspace-aroundが動作しないと思います。なぜですか？私はそれをFirefoxのように見せて、他のブラウザでも、大規模なハッキングをせずにすることができます...ありがとう！

はい、私はおそらく、これはメニューの非展開バージョンであることを伝えるべきです、あなたはhtmlにもっと多くがあることがわかります。メニューはホバリング時に展開され、機能やCSSで作成されますが、このバグには関係ありません。他のすべての機能を削除すると、アイコンの間隔が同じになります。

<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

あなたの親コンテナのすべての利用可能なスペースを使用する必要があります。

は、あなたは以下の私のhtmlを参照してください。あなたのコードではあなたはそれを使用していません。

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

プラス時間のほとんどは、このパネルには、使用md-contentが、その場合であるスクロールバーので、より良いを持つべきではありません。実装の変更が各ブラウザで変更されるため、layout-alignを使用しないことを強くお勧めします。間隔のこれらの種類の

<span flex></span>

を使用してみてください。

ここにあなたの完全な作業コードがあります。ここで

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

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

はworkginリンクです。 http://codepen.io/next1/pen/qNEZZM

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