angularjs材料佈局，柔性和偏移

1）我想拉伸兒童股利60％，並對齊它在中心，但它不工作。我使用flex來將div的大小拉伸到60％。參見實施例http://plnkr.co/edit/eaLjJDbjL1KnOI4jLYyO?p=preview angularjs材料佈局，柔性和偏移

<div layout="column" layout-align="center"> 
<div style="background-color:#00A000;height: 40px;" flex="60"> 

</div> 

<div style="background-color:#004444;height: 40px;" flex="60"> 

</div> 

<div style="background-color:#0077b3;height: 40px;" flex="60"> 

</div>

2）在Angularjs材料文檔中提到，「自定義佈局中的大小和元件的位置，使用彎曲，偏移，和柔性訂單屬性」，我沒有看到抵消的例子。

來源

2015-03-13 ask007

這是你需要做什麼..

<div layout="column" layout-align="center"> 
    <div layout="row" layout-align="center center"> 
     <div style="background-color:#00A000;height: 40px;" flex="60"> 
     </div> 
    </div> 
    <div layout="row" layout-align="center center"> 
     <div style="background-color:#004444;height: 40px;" flex="60"> 
     </div> 
    </div> 
    <div layout="row" layout-align="center center"> 
     <div style="background-color:#0077b3;height: 40px;" flex="60"> 
     </div> 
    </div> 
</div>

瞭解更多關於佈局here

來源

2015-03-14 21:26:05 nitin

不幸的是，您提供的參考鏈接已損壞，而且我現在無法在其官方文檔的任何位置找到此文檔。 – 2016-03-03 15:36:24

佈局文檔位於Api Reference - > Layout下的左側菜單中。我也更新了鏈接。 – nitin 2016-03-08 10:52:53

謝謝。 upvoted！ – 2016-05-18 10:19:29

+1 nitins回答。它真的幫我解決了我的問題。 Here是使用角材卡以不同方式顯示他的答案的蹲伏者。

在HTML：上述

<section class="content-section gridListdemoBasicUsage"> 
    <div class="row"> 
    <div class="col-sm-8 col-sm-offset-2"> 
     <h1 class="text-center">The Different Ways SharePoint can help define your business</h1> 
     <!-- Separator --> 
     <md-divider ng-style="{'background': 'rgba(255, 102, 51, 0.7)'}"></md-divider> 
    </div> 
    </div> 
    <div layout="row" layout-align="center" data-ng-style="{'width': '100%'}"> 
    <div class='md-padding' layout="row" layout-align="center" layout-wrap> 
     <md-card class="md-whiteframe-9dp" data-ng-style="{'width': '350px', 'border-radius': '6px'}" data-ng-repeat="card in spcVM.serviceCards" layout-padding> 
     <a data-ng-if="card.imagePath" ui-sref="{{card.link}}"><img layout-fill src="{{card.imagePath}}" class="img-rounded" alt="{{card.imageAlt}}" /></a> 
     <md-card-content> 
      <div> 
      <h4>{{card.title}}</h4> 
      <md-divider ng-style="{'background': 'rgba(255, 102, 51, 0.7)'}"></md-divider> 
      <br /> 
      <p>{{card.mainContent}}</p> 
      </div> 
     </md-card-content> 
     <md-card-footer> 
      <div class="md-actions" layout="row" layout-align="center end"> 
      <md-button ng-click="card.action($event)">View</md-button> 
      </div> 
     </md-card-footer> 
     </md-card> 
    </div> 
    </div> 
</section>

在容器中流體的div。

來源

2015-10-19 18:35:46 Karnith

angularjs材料佈局，柔性和偏移

回答

相關問題