<!-- 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
解决方法
我想根本问题来自于在同一个父容器中同时使用layout-align和layout-fill.
解决方案
简而言之,有两种方法可以解决这个问题：
>使用align-items在父容器上添加自定义css规则：stretch;
>仅使用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相关规则中的任何内容.
我们对拉伸的弹性项目的期望应该利用对齐项目：通过css-tricks在此A Complete Guide to Flexbox中提到拉伸.但对于角度材料实施而言,情况并非如此.这是有道理的,因为对齐项目规则已经在layout-align- *中用作定位项目的方式.
例子
检查此codepen example以查看其工作原理.