Угловой материал Flex Box

Question

Я новичок в flexbox и кажется очень сложным по сравнению с бутстрапом. У меня есть экран-заставку, где я обязан вертикально и горизонтально центрировать содержание:

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

однако это не центровку, пока я не добавить высоту к нему:

style="height:500px" 

Почему это поведение путь? Является ли мой код неправильным? Это не похоже на правильный способ сделать это.

Также с деталями в моем втором row с layout-wrap последним div с flex=25 перекрывает второй div с flex=45.

В принципе, я хочу сделать это вертикально и горизонтально центрировать div и иметь возможность разделить этот div на столько столбцов, сколько мне нравится, сохраняя чувствительную ширину, которая регулируется в зависимости от размера экрана.

Answer 1

Может быть, это может направить вас в правильном направлении - 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>