angular-material - 弹性布局 : Push last item to the end horizontally

Question

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

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

在片段中，我们可以看到一个包含按钮的简单工具栏(打开更大尺寸的 HTML View ，因为触发了一些 fxShow / fxHide 指令)。

我想要做的是按下 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然而，它说:

'fxFill' flexbox styling directive
Maximizes width and height of element in a layout container

NOTE: fxFill is NOT responsive API!!