javascript - Angular Material : layout-fill not filling parent

Question

<!-- Container Div -->
<div layout-fill>
    <!-- Image Div -->
    <div layout="column" layout-align="center center" class="coverImage" layout-fill>
        <md-content class="md-padding">
            Sample Text Here
        </md-content>
        <md-button class="md-raised md-primary">Sign Up</md-button>
    </div>
</div>

我有上面的 HTML 部分，我正在尝试使用 Angular Material 的 flexbox 支持来创建一个页面，该页面的背景图像是整页。叠加在该图像上的是一些文本和一个位于图像中心的按钮。

如果我检查 chrome 中最外层的 div，它的大小(如预期的那样)是全屏。由于某种原因，图像 div 不执行此操作。它只占用足够的空间来包含文本和按钮。任何关于为什么会发生这种情况的见解将不胜感激。我知道这可以通过多种不同的方式使用各种 css 技巧来完成，但我想了解我对 flex 的工作原理缺少什么。

更新
链接到 JSFiddle

Answer 1

我想根本问题来自于在同一个父容器中同时使用 layout-align 和 layout-fill。

解决方案

简而言之，有两种方法可以克服这个问题:

1. 使用 align-items: stretch;

在父容器上添加自定义 css 规则

2. 仅使用layout-fill(父容器上没有layout-align)

---

原因

每当使用 layout-* 指令时，angular-material 都会向元素添加一个类，并在那里应用 flex 布局相关的样式。例如:

<div class="parent" layout="row" layout-align="space-between center" layout-fill> 
  <div class="child child-1" flex>
  <div class="child child-2" flex="none">
</div>

将编译为:

<div class="parent layout-fill layout-align-space-between-center layout-row" layout="row" layout-align="space-between center" layout-fill> 
  <div class="child child-1 flex" flex>
  <div class="child child-2 flex-none" flex="none">
</div>

生成的 css 将是:

.layout {
    box-sizing: border-box;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
}

.layout-row {
    flex-direction: row;
}

.layout-align-space-between-center {
    align-items: center;
    align-content: center;
    max-width: 100%;
    justify-content: space-between;
}

.layout-fill {
    margin: 0;
    width: 100%;
    min-height: 100%;
    height: 100%;
}

正如您在这里看到的，layout-fill 根本没有改变任何与 flex 相关的规则。

我们对拉伸(stretch) flex 元素的期望应该利用 align-items: stretch，如 A Complete Guide to Flexbox 中所述通过 CSS 技巧。但这根本不是 Angular Material 实现的情况。这是有道理的，因为 align-item 规则已经在 layout-align-* 中用作定位元素的方式。

例子

检查这个codepen example看看它是如何工作的。