Angular-Material Flex macht nichts

Ich möchte eine Login-Seite mit Angular-Material-Layout-Richtlinie erstellen, aber ich stieß auf ein Problem mit flex. Bei Linie 8 sollte nicht flex=10 die div Höhe auf 10% setzen? Vermisse ich etwas Wichtiges?Angular-Material Flex macht nichts

Vielen Dank im Voraus für jede Art von Hilfe!

* > div { 
 
    background-color: rgba(50, 150, 255, .5); 
 
} 
 
* > div:nth-of-type(2) { 
 
    background-color: rgba(255, 255, 120, 1); 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.7/angular-material.min.css" rel="stylesheet" /> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular-csp.css" rel="stylesheet" /> 
 

 
<body layout="column"> 
 
    <div class="login" layout="row" flex> 
 
    <div flex></div> 
 
    <div layout="column"> 
 
     <div flex=10></div> <!-- Here: Why is this not working? --> 
 
     <div> 
 
     Hello 
 
     </div> 
 
     <div flex></div> 
 
    </div> 
 
    <div flex></div> 
 
    </div> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.2/angular.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.7/angular-material.min.js"></script> 
 
</body>

PS .: Ich bin mit Chrom 49.0.2623.112 m (64-Bit)

Quelle

2016-04-19 Pho3nixHun

Wenn Sie eine Höhe für die äußere div und Layout-fill Attribut definieren Dein Container sollte es funktionieren.

* > div { 
 
    background-color: rgba(50, 150, 255, .5); 
 
} 
 
* > div:nth-of-type(2) { 
 
    background-color: rgba(255, 255, 120, 1); 
 
}

<link href="https:////cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.7/angular-material.min.css" rel="stylesheet" /> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular-csp.css" rel="stylesheet" /> 
 

 
<body layout="column"> 
 
<div class="login" layout="row" flex style="height: 200px"> 
 
    <div flex></div> 
 
    <div flex layout="column" layout-fill> 
 
     <div flex="20" style="background-color: #87CEFA;"> 
 
      flex20 
 
     </div> 
 
     <div flex="10" style="background-color: #B0E2FF;"> 
 
      flex10 
 
     </div> 
 
     <div flex="30" style="background-color: #87CEFA;"> 
 
      flex30 
 
     </div> 
 
    </div> 
 
    <div flex></div> 
 
</div> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.2/angular.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.7/angular-material.min.js"></script> 
 
</body>

Quelle

2016-04-19 11:24:32 huseyinozcan

Vielen Dank! Es hat den Trick gemacht :) (übrigens habe ich 'height: 100%' verwendet, was die Empfindlichkeit nicht unterbricht) – Pho3nixHun

Angular-Material Flex macht nichts

Antwort

Verwandte Themen