角度のある素材2を使用して水平のカードを作成する

Question

このcodepenを角度で再​​現しようとしています。ただし、Angularは下位互換性がありません。これはどのように角度で行うことができますか？

<div ng-controller="AppCtrl" class="carddemoBasicUsage" ng-app="MyApp"> 

    <md-content class="md-padding"> 

    <md-card layout="row" 
      layout-sm="column"> 
     <div flex-gt-sm="33" 
      layout-align="center center" 
      layout="column"> 
     <img src="http://i.imgur.com/2uL6DQ8.jpg" 
      flex 
      class="md-card-image"> 
     </div> 
     <div layout="column" flex> 
     <md-card-content flex> 
      <h2 class="md-title">Paracosm</h2> 
      <p> 
      lorem ipsum 
      </p> 
     </md-card-content> 
     <div class="md-actions" layout="row" layout-align="end center"> 
      <md-button>Action 1</md-button> 
      <md-button>Action 2</md-button> 
     </div> 
     </div> 
    </md-card> 
    <md-content> 
</div> 

Answer 1

見ることができ材2をサポートするだけでフレキシボックスを使用していません親divの行にレイアウトを設定します。

<md-card> 
     <md-card-header> 
      <md-card-title> Title </md-card-title> 
      <md-card-subtitle> Subtitle</md-card-subtitle> 
     </md-card-header> 
     <div fxLayout="row"> 
     <img md-card-image src="" fxFlex="25"> 
      <span fxFlex="10"></span> 
     <md-card-content fxFlex="65"> 
      <p> 
       content 
      </p> 
     </md-card-content> 
     </div> 
     <md-card-actions> 
      <button md-button>Action 1</button> 
      <button md-button>Action 2</button> 
     </md-card-actions> 
    </md-card> 

Answer 2

角度1.1は、あなたが材料2のカードを使用したい場合、あなたは水平カードに興味がある人のためにここにhttps://material.angular.io/components/component/card