material-toolbar 内的弹性布局

Question

我目前在使用 flex 布局布局 Angular2 的 material 模块时遇到问题。

正如您将在下面的示例以及附加的实时版本中看到的那样，Angular2 的工具栏模块似乎不允许将弹性布局放置在 mat-toolbar

中

<mat-toolbar color="primary">

    <div fxLayout="row" fxLayoutAlign="end">
        <a mat-button fxFlex="auto">Item 1</a>
        <a mat-button fxFlex="auto">Item 2</a>
        <a mat-button fxFlex="auto">Item 3</a>
        <a mat-button fxFlex="auto">Item 4</a>
    </div>

</mat-toolbar>

<div fxLayout="row" fxLayoutAlign="end">
    <a mat-button>Item 1</a>
    <a mat-button>Item 2</a>
    <a mat-button>Item 3</a>
    <a mat-button>Item 4</a>
</div>

Live Example

Editor Version

我想要实现的是将按钮放置在右侧。在 mat-toolbar 之外，一切都像一个魅力。有什么我遗漏的吗？或者是根植于 material 仍处于测试阶段的错误？

Answer 1

哦，我很确定它有效，别担心:)

只需将 fxFlex 添加到包含所有项目的 div 即可。

您的问题是 div 没有占用所有 space，让您认为它不起作用。

此外，使用 fxFlex 属性会使您的元素占用所有宽度，因此仅当组件应占用所有剩余宽度时才使用它 space.

Do you want a working blitz 还是你想尝试一下自己发现？

Answer 2

问题是对 fxLayoutAlign 的误解。它只是对齐容器内的内容，并不影响容器本身的位置。在您的情况下，包含所有链接的 div 的位置不受 fxLayoutAlign 属性的影响，而只会影响 div.

中链接的位置

<mat-toolbar color="primary">
    <span>Nav</span>
    <div fxLayout="row" fxLayoutAlign="end">
        <a mat-button fxFlex="auto">Item 1</a>
        <a mat-button fxFlex="auto">Item 2</a>
        <a mat-button fxFlex="auto">Item 3</a>
        <a mat-button fxFlex="auto">Item 4</a>
    </div>

</mat-toolbar>

相反，您可以在右侧和左侧的元素之间放置一些东西，用完容器的所有剩余 space：

<mat-toolbar color="primary">
    <span>Navi</span>
    <span fxFlex></span>
    <a mat-button>Item 1</a>
    <a mat-button>Item 2</a>
    <a mat-button>Item 3</a>
    <a mat-button>Item 4</a>
</mat-toolbar>

material-toolbar 内的弹性布局

flex-layout within material-toolbar

angular

angular-material

angular-flex-layout