角材Flex盒

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

標記

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