如何使材料2中的md-sidenav响应

Question

我正在使用此代码来生成工具栏响应

<md-toolbar>
  <div fxLayout fxShow="false" fxShow.gt-xs>
    <button md-raised-button><md-icon>add</md-icon>New Role</button>
    <span style=" flex-grow: 0.1"></span>

    <button md-raised-button><md-icon>mode_edit</md-icon></button>
    <button md-raised-button><md-icon>delete</md-icon></button>

    <span style=" flex-grow: 2"></span>
    <button md-raised-button><md-icon>perm_identity</md-icon>Add User</button>

    <span style=" flex-grow: 0.1"></span>
    <button md-raised-button><md-icon>delete</md-icon></button>
  </div>


  <!--button that will be visible when screen is small-->
  <span style="flex: 1 1 auto;"></span>
  <button md-button [md-menu-trigger-for]="menu" fxHide="false" fxHide.gt-xs>
     <md-icon>menu</md-icon>
  </button>
</md-toolbar>

现在，当屏幕尺寸特别小时，所有其他按钮都会被隐藏，并显示一个菜单按钮。我面临的问题是，当屏幕为完整大小时，flex-grow属性在工具栏中不起作用。我已经将flex-grow赋予了0.1,2 span的元素，但是在UI上按钮之间没有间隙。

可能出现什么问题？

还有其他更好的方法可以让工具栏响应吗？

更新

我试过fxFlex指令仍然无效。 由于所有按钮都在div下，现在如果我删除该div容器，它就可以了。但是因为我必须根据屏幕大小隐藏所有按钮，所以div必须包含所有按钮。