角2材料不調整或調整用於移動/更小的寬度

Question

我使用角2物質爲具有基本的Navbar設置位置：

<mat-toolbar color="primary" class="mat-elevation-z2"> 
    <button mat-icon-button (click)="openSideNav()"> 
    <mat-icon class="md-24" >menu</mat-icon> 
    </button> 
    <span>{{this.title}}</span> 
    <button mat-button [matMenuTriggerFor]="infoMenu">Information</button> 
    <button mat-button [matMenuTriggerFor]="toolsMenu">Tools</button> 
    <button mat-button>Blog</button> 
    <span class="fill-space"></span> 
    <!-- Pull right --> 
    <div class="float-right"> 
    <button mat-icon-button> 
     <li class="fa fa-user-circle fa-2x"></li> 
    </button> 
    </div> 
</mat-toolbar> 

當angular.io現場調整大小（對於移動，或小包裝在桌面上），它是在這裏看到調整罰款：

但當礦重新排列的按鈕簡單地被推出來屏幕視圖：

我在這樣的假設之下，即只使用材料項目，頁面會自動響應，就像使用引導元素一樣。 或者我需要創建代碼來做angular.io（IE頁面的寬度和調整時，它的房間外）類似的事情，如果我不得不創建代碼是有簡化的方式做檢查是否工具欄中的項目不適合屏幕？謝謝

Answer 1

所以我完全忘了'flex-layout'，只要我把正確的調用放到函數中，它就會自動完成所有這些。

這裏是Flex和角材料響應導航欄的runthrough：https://dev-plaza.com/responsive-navbar-mit-angular-flex-layout-und-angular-material

，這裏是柔性佈局：https://github.com/angular/flex-layout

這裏總算是Flexbox的文檔：http://cssreference.io/flexbox/