Angular Material：layout-fill not fill parent< div> [英] Angular Material: layout-fill not filling parent <div>

问题描述

 <！ -  Container Div  - > 
< div layout-fill> 
 <！ -  Image Div  - > 
< div layout =columnlayout-align =center centerclass =coverImagelayout-fill> 
< md-content class =md-padding> 
此处示例文本
< / md-content> 
< md-button class =md-raised md-primary>注册< / md-button> 
< / div> 
< / div> 
  

我有上面的HTML部分，我正在尝试使用Angular Material的flexbox支持来创建具有完整页面的背景图像的页面。如果我检查铬最外面的div它的大小是（如预期）的全屏。由于某种原因，图像div不这样做。它只占用足够的空间来容纳文本和按钮。任何有关为什么会发生的见解将不胜感激。我知道这可以使用各种CSS技巧以几种不同的方式来完成，但我想知道什么即时通讯错过了如何弹性工程。

更新

strong>

链接到 JSFiddle

解决方案

我猜根本问题来自使用 layout-align 和 layout-fill <

$ h $ $
$ b $ p $总而言之，有两种方法克服这个：
$ b

1. 使用 align-items：stretch; / code>




2. 仅使用 layout-fill （no 父容器上的布局对齐）
   
   $ b $ hr
   
   

   原因

   
   
   

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

    < div class =parentlayout =rowlayout-align =space-between center布局填充> 
   < div class =child child-1flex> 
   < div class =child child-2flex =none> 
   < / div> 
     

   将被编译为：

<$ p $中间布局布局行布局=行布局对齐=空间之间的中心布局填充<
< div class =child child-1 flexflex>
< div class =child child-2 flex-noneflex =none>
< / div>


   结果是：
   
   

     .layout {
    box-sizing：border-box; 
    display：-webkit-box; 
    display：-webkit-flex; 
   显示：-moz-box; 
    display：-ms-flexbox; 
    display：flex; 
   } 
    
    .layout-row {
    flex-direction：row; 
   } 
    
    .layout-align-space-between-center {
    align-items：center; 
    align-content：center; 
   最大宽度：100％; 
    justify-content：space-between; 
   } 
    
    .layout-fill {
    margin：0; 
   宽度：100％; 
   最低身高：100％; 
   身高：100％; 
    
    
    
    
    
    $ b 
   正如你在这里看到的那样， layout-fill 根本不会改变flex相关规则中的任何内容。
    
    
   我们所期望的拉伸的flex项目应该利用 align-items：stretch 就像这个一个完整的Flexbox指南的CSS技巧。但是，角度材料实现并非如此。这是有道理的，因为 align-item 规则已经在 layout-align  -  * 中用来定位该项目。
    
    
    
   范例
    
    
    
   检查 codepen示例，看看它是如何工作的。
    
   <!-- 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>
   I have the above section of HTML, and I'm trying to use Angular Material's flexbox support to create a page that has a background image that is the full page.  Overlayed on this image is some text and a button that is in the center of the image.
   
   If I inspect the outermost div in chrome it's size is (as expected) the full screen.  The image div for some reason does not do this.  It only takes up enough space to contain the text and button.  Any insights on why this is happening would be appreciated.  I know that this can be done in several different ways using various css tricks but I would like to learn what im missing about how flex works.
   
   Update
   
   Link to JSFiddle 
   解决方案
   I guess the fundamental issue comes from using both layout-align and layout-fill in the same parent container.
   
   Solutions
   
   In short, there are 2 ways to overcome this:
   
   Add a custom css rule on parent container with align-items: stretch;
   Use only layout-fill (no layout-align on the parent container)
   
   
   
   
   Reasons
   
   Whenever using layout-* directive, angular-material would add a class to the element, and apply flex layout related styles there. For example: 
   <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>
   Will be compiled to :
   <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>
   And the resulting css would be:
   .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%;
   }
   As you can see here, layout-fill does not change anything in flex related-rules at all.
   
   What we expect for a stretched flex item should leverage on align-items: stretch as mentioned in this A Complete Guide to Flexbox by CSS-tricks. But this simply is not the case for angular material implementation. And it make sense because align-item rule is already being used in layout-align-* as a way to position the item.
   
   Examples
   
   Check this codepen example to see how it works.
   
                           
   这篇关于Angular Material：layout-fill not fill parent&lt; div&gt;的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！