5

我目前在使用 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一切都像魅力一样。有什么我遗漏的东西，还是植根于材料仍处于测试阶段的错误？

4

2 回答 2

9

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

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

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

此外，使用该fxFlex属性会使您的元素占据所有可能的宽度，因此只有在组件应该占据所有剩余空间时才使用它。

你想要一个有效的闪电战还是你想自己尝试和发现？

于 2018-01-11T14:35:48.020 回答
4

问题在于对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>
于 2018-01-11T14:47:08.680 回答