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

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

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

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

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

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>

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

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

材料工具栏中的flex-layout

2 个答案: