Question

这是我到目前为止所做的：

https://stackblitz.com/edit/angular-jsmp9l

在代码片段中，我们可以看到一个包含按钮的简单工具栏（因为有一些fxShow / fxHide指令触发，所以打开更大尺寸的HTML视图。）

我要做的是按下最右边的div末尾的“登录”按钮。

我尝试了以下内容：

在“登录和联系人”按钮之间添加<span style="flex: 1 1 auto;"></span>
在“登录”按钮

style="margin-left: auto;"

将fxFlexFill添加到包含这些链接的div元素，然后重复使用上面提到的span和margin-left
查看有关Flex容器的文档，但没有任何帮助我

如果我删除div容器并使用<span style="flex: 1 1 auto;">它可以正常工作，则登录按钮会显示在工具栏的末尾（水平）。

我想了解div容器导致此行为的原因以及如何在右侧按下“登录”按钮。也许我对Flex容器的理解并不好，所以欢迎指点。

Answer 1

您可以尝试以下方法：

<div fxFill>
  <!-- ... -->
  <a mat-button routerLink="/contact">Contact</a>
  <span fxFlex></span>
  <a mat-button routerLink="/login">Login</a>
</div>

fxFlex的范围将填满未被其他子元素用尽的所有父容器的空间。这就是为什么父容器应该有width: 100%，否则它只会像它的孩子那样大。使用Flex-Layout，您可以使用fxFill。

来实现这一目标

编辑：

在declarative API docs中，列出了fxFill，但没有任何评论。然而，在code docs中，它说：

＆＃39; fxFill＆＃39; flexbox造型指令
  最大化布局容器中元件的宽度和高度

  注意：fxFill不是响应式API !!

Flex-Layout：将最后一个项目水平推送到末尾

1 个答案: