使用 Angular Material 和 Flex 的垂直填充

Question

如何垂直填充屏幕，例如一个 md 内容或只是一个 div？我还是想把里面的内容整理成专栏。

<md-content layout="column" layout-fill>
  My content!
</md-content>

Answer 1

当您有一行具有 flex 属性时，它会垂直填充屏幕。

在下面的示例中，"My content" 将填充所有可用的 space（垂直和水平）

<md-content layout="row" flex>
    <md-content layout="column" flex>
        My content
    </md-content>
</md-content>

Answer 2

关于 @stack item 回答 angular material 说：

In general, <md-content> components are not designed to be nested inside one another.

所以我建议将第一个 md-content 更改为正常的 div。

<div layout="row" flex>
    <md-content layout="column" flex>
        My content
    </md-content>
</div>

Vertical fill with Angular Material & Flex