각 재료 디자인 플렉스 카드

Question

휴대 기기 용으로 전폭 표시, ipads/태블릿 용으로 2 개, 데스크톱 용으로 3 개를 표시하기위한 코드 조각입니다. 그것은 모바일 올바른를 표시하는 것 같지만 나머지는 아래의 예를 작업

<div ng-controller="MerchantListCtrl" ng-cloak> 
    <md-content class="md-padding" layout-xs="column" layout="row"> 
     <div flex-xs="100" flex-md="50" flex-gt-md="33" layout="column" ng-repeat="merchant in merchants | filter: { featured: 'false' }" ng-show='merchants.length'> 
      <md-card> 
       <md-card-title> 
        <md-card-title-media> 
         <div class="md-media-lg card-media"> 
          img 
         </div> 
        </md-card-title-media> 
       </md-card-title> 
       <md-card-title> 
        <md-card-title-text> 
         <span class="md-headline">{{merchant.name | limitTo:27}}<span ng-if="merchant.name.length > 27">&hellip;</span></span> 
         <span class="md-subhead">Large</span> 
        </md-card-title-text> 
       </md-card-title> 
      </md-card> 
     </div> 
    </md-content> 
</div> 

Answer 1

에 의해 4로 되돌아갑니다. (스타일을 개선하기 위해 플러스 몇 가지 사소한 변경)하여 md-content 태그에 layout-wrap 지시어를 추가

angular 
 
    .module('app', ['ngMaterial']) 
 
    .controller('MerchantListCtrl', merchantListCtrl); 
 

 
merchantListCtrl.$inject = ['$scope']; 
 

 
function merchantListCtrl($scope) { 
 
    $scope.merchants = [{ 
 
    name: 'hello', 
 
    featured: 'false' 
 
    }, { 
 
    name: 'world', 
 
    featured: 'false' 
 
    }, { 
 
    name: 'sdfsdfdsfsd ds;fdsfsdffds sdfsdfdf sfdfsdf', 
 
    featured: 'false' 
 
    }, { 
 
    name: 'hello', 
 
    featured: 'false' 
 
    }, { 
 
    name: 'world', 
 
    featured: 'false' 
 
    }, { 
 
    name: 'sdfsdfdsfsd ds;fdsfsdffds sdfsdfdf sfdfsdf', 
 
    featured: 'false' 
 
    }]; 
 
}

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.css"> 
 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script> 
 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.min.js"></script> 
 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-aria.min.js"></script> 
 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-messages.min.js"></script> 
 
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.js"></script> 
 

 
<div ng-app='app' ng-controller="MerchantListCtrl" ng-cloak> 
 
    <md-content class="md-padding" layout-xs="column" layout-gt-xs="row" layout-wrap flex> 
 
    <div flex-xs="100" layout-padding flex-gt-xs='50' flex-gt-md='33' layout="column" layout-align='center center' ng-repeat="merchant in merchants | filter: { featured: 'false' }" ng-show='merchants.length'> 
 
     <md-card flex='100' layout-fill> 
 
     <md-card-title> 
 
      <md-card-title-media> 
 
      <div class="md-media-lg card-media"> 
 
       img 
 
      </div> 
 
      </md-card-title-media> 
 
     </md-card-title> 
 
     <md-card-title> 
 
      <md-card-title-text> 
 
      <span class="md-headline">{{merchant.name | limitTo:27}}<span ng-if="merchant.name.length > 27">&hellip;</span></span> 
 
      <span class="md-subhead">Large</span> 
 
      </md-card-title-text> 
 
     </md-card-title> 
 
     </md-card> 
 
    </div> 
 
    </md-content> 
 
</div>