Flex-Layout ：将最后一项水平推到最后

Question

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

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

在代码片段中，我们可以看到一个包含按钮的简单工具栏（打开更大尺寸的 HTML 视图，因为有一些 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 的跨度将填满所有未被其他子元素使用的父容器的 space 。这就是父容器应该有 width: 100% 的原因，否则它只会和它的子容器需要的一样大。使用 Flex-Layout，您可以通过使用 fxFill.

来实现

编辑：

但是在 declarative API docs, fxFill is listed but does not have any comment. In the code docs 中，它说：

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

NOTE: fxFill is NOT responsive API!!

Flex-Layout ：将最后一项水平推到最后

Flex-Layout : Push last item to the end horizontally

angular-material

angular-flex-layout