角度のある素材のフレックスボックス

Question

フレックスボックスには新しく、ブートストラップに比べて本当に複雑なようです。私はそれに高さを追加するまで、それは中央しませんが

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

なぜそれがこのように動作しません方法？私のコードは間違っていますか？これはそれを行う正しい方法のようには見えません。 flex=25とlayout-wrap最後divと私の二row内の項目でも

はflex=45で二divと重なります。

基本的には、縦と横のdivを中心にして、画面のサイズに応じて調整する幅を維持しながら、divを複数の列に分割することができます。

Answer 1

多分これは正しい方向にあなたを指すことができます - CodePen

マークアップ

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