angularjs 材质布局，Flex 和 Offset答案

【问题标题】：angularjs material Layout, Flex and Offsetangularjs 材质布局，Flex 和 Offset
【发布时间】：2015-05-16 01:50:57
【问题描述】：

1) 我正在尝试将子 div 拉伸到 60% 并将其对齐在中心，但它不起作用。我正在使用 flex 将 div 的大小拉伸到 60%。见例子http://plnkr.co/edit/eaLjJDbjL1KnOI4jLYyO?p=preview

<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 Material 文档中提到“要自定义布局中元素的大小和位置，使用 flex、offset 和 flex-order 属性”，我没有看到 offset 的示例。

【问题讨论】：

标签： css angularjs flexbox angular-material

【解决方案1】：

这是你需要做的..

<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

【讨论】：

很遗憾，您提供的参考链接已损坏，我现在在其官方文档中的任何地方都找不到此文档。
布局文档位于左侧菜单中的 Api Reference -> Layout 下。我也更新了链接。

【解决方案2】：

+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 中。

【讨论】：