Angular Material Flex Box

Question

Ich bin neu in Flexbox und es scheint sehr komplex im Vergleich zu Bootstrap. Ich habe einen Splash-Screen, wo ich vertikal erforderlich bin und in der Mitte horizontal mit einem Gehalt:

<div layout="row" layout-align="center center"> 
    <div layout="row" layout-wrap> 
     <div flex="30"> 
      <img ng-src="images/logo.png" src="//:0" alt="example.com" title="Example" /> 
     </div> 
     <div flex="45"> 
      <h2 class="title">example.com</h2> 
     </div> 
     <div flex="25"> 
      <h1 class="bang">Bang!</h1> 
     </div> 
    </div> 
</div> 

aber es nicht zentriert, bis ich eine Höhe, um es hinzuzufügen:

style="height:500px" 

Warum es diese verhält sich Weg? Ist mein Code falsch? Dies scheint nicht der richtige Weg zu sein.

auch mit den Einzelteilen in meinem zweiten row mit den layout-wrap die letzten div mit flex=25 überlappt die zweiten div mit flex=45.

Grundsätzlich was ich tun möchte dies vertikal und horizontal zentrieren ein div und in der Lage sein, dass div in so viele Spalten wie ich mag unter Beibehaltung einer ansprechenden Breite, die sich abhängig von der Bildschirmgröße einstellt.

Answer 1

Vielleicht können Sie in die richtige Richtung - CodePen

Markup

<div ng-controller="AppCtrl" ng-cloak="" ng-app="MyApp" layout-fill layout="row" layout-xs="column" layout-align="center center"> 
    <div flex="30"> 
     <img ng-src="images/logo.png" src="//:0" alt="example.com" title="Example" /> 
    </div> 
    <div flex="45"> 
     <h2 class="title">example.com</h2> 
    </div> 
    <div flex="25"> 
     <h1 class="bang">Bang!</h1> 
    </div> 
</div>