각도 재료 플렉스 박스

Question

저는 flexbox를 처음 접했고 부트 스트랩과 비교하여 정말 복잡해 보입니다.

style="height:500px" 

가 왜이 행동 않습니다 : 나는 그것을 높이를 추가 할 때까지

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

가 중심을하지 않습니다하지만 : 나는 수직에 필요한 수평 콘텐츠를 중심 오전 시작 화면이 방법? 코드가 잘못 되었나요? 이것은 그것을하는 올바른 방법처럼 보이지 않습니다. 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>