使用md-toolbar的FlexBox折叠问题

Question

我在我的Angular应用程序中使用FlexBox模块来制作标题。但是，在下面编写的代码中，当窗口大小减小时，标题不会折叠到列中，在移动设备上测试它也不会显示折叠视图。我已经玩了很多指令，标题尺寸变小但从不折叠成一列。

<md-toolbar fxLayout.xs="column" fxLayout.md="column" fxLayoutAlign.md="center" fxLayoutAlign="center"  class="mat-elevation-z2"  color="primary">




    <button fxFlex md-button [routerLink]="['/', '']">
        {{ 'PUBLIC.MENU.HOME' | translate }}

    </button>

    <button fxFlex  md-button [routerLink]="['/', 'about']">
        {{ 'PUBLIC.MENU.ABOUT' | translate }}
    </button>
    <button fxFlex md-button [routerLink]="['/', 'about', 'us', 22]">
        {{ 'PUBLIC.MENU.ABOUT_US' | translate }}
    </button>
    <button fxFlex md-button [routerLink]="['/', 'about', 'banana']">
        {{ 'PUBLIC.MENU.ABOUT_BANANA' | translate }}
    </button>
    <button fxFlex md-button [routerLink]="['/', 'about', 'apple', 6, 'pear']">
        {{ 'PUBLIC.MENU.ABOUT_APPLE_PEAR' | translate }}
    </button>
    <button  fxFlex md-button [routerLink]="['/', 'secure-page']">
        {{ 'PUBLIC.MENU.SECURE' | translate }}
    </button>
</md-toolbar>

我做错了什么？