材料工具栏中的弹性布局

Question

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

正如您将在下面的示例以及附加的实时版本中看到的那样，Angular2 的工具栏模块似乎不允许将 flex 布局放置在 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 之外，一切都像魅力一样。有什么我遗漏的，还是一个植根于材料仍处于测试阶段的错误？

Answer 1

问题是对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>

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

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

Answer 2

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

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

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

另外，使用fxFlex 属性可以让你的元素占据它们所能占据的所有宽度，所以只有在组件应该占据所有剩余空间时才使用它。

Do you want a working blitz 还是您想亲自尝试并发现？