材料工具栏中的flex-layout

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>

实例

编辑版

我想要实现的是在右侧对齐按钮的位置.外面mat-toolbar的一切就像一个魅力.我有什么遗漏或根据材料仍然是beta的错误吗？

Answer 1

哦,我很确定它有效,不要担心:)

只需添加fxFlex到包含所有商品的div中即可.

你的问题是div没有占用所有的空间,让你认为它不起作用.

此外,使用该fxFlex属性可使元素占用所有宽度,因此仅在组件占用所有剩余空间时才使用它.

你想要一个有效的闪电战吗？或者你想尝试一下并自己发现？

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>

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

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