3

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

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

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

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

我尝试了以下方法：

  • <span style="flex: 1 1 auto;"></span>在 Login 和 Contact 按钮之间添加一个
  • style="margin-left: auto;"在登录按钮中添加一个
  • 添加fxFlexFill到div包含链接的元素，然后再试一次span，margin-left如上所述
  • 四处寻找有关 Flex 容器的文档，但没有任何帮助

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

我想了解为什么div容器会导致这种行为，以及如何才能将登录按钮按在右侧。也许我对 Flex 容器的理解不是很好，所以欢迎任何指点。

4

1 回答 1

7

您可以尝试以下方法：

<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！

于 2018-01-30T21:02:18.770 回答