Eckig-material flex tut nichts

Ich möchte eine login-Seite mit eckig-material der layout-Richtlinie, aber ich lief in ein problem mit flex. In Zeile 8 sollte nicht flex=10 die div's Höhe bis zu 10%? Bin verpasse ich etwas wichtiges?

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

CSS:

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

HTML:

<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 chrome 49.0.2623.112 m (64-bit)

InformationsquelleAutor Pho3nixHun | 2016-04-19
  1. 1

    Wenn definieren Sie die Höhe für das äußere div und layout-füllen Attribut für den container, sollte es funktionieren.

    CSS:

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

    HTML:

    <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>

    • Danke!!! Es war der trick 🙂 (btw ich benutzt height: 100%, die nicht bricht Empfindlichkeit)
    InformationsquelleAutor huseyinozcan
Schreibe einen Kommentar