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以上作为mentionned
• 四处寻找有关 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.

编辑：

在声明性 API 文档中，fxFill列出了但没有任何注释。然而，在代码文档中，它说：

'fxFill' flexbox 样式指令
最大化布局容器中元素的宽度和高度

注意：fxFill 不是响应式 API！