CSS angularjs 材质布局、Flex 和偏移
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29034637/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
angularjs material Layout, Flex and Offset
提问by ask007
1) I am trying to stretch the children divs to 60% and align it in the center but it is not working. I am using flex to stretch the size of the div to 60%. See example http://plnkr.co/edit/eaLjJDbjL1KnOI4jLYyO?p=preview
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) In Angularjs Material document it is mentioned that "to customize the size and position of elements in a layout, use flex, offset, and flex-order attributes", I don't see an example of offset.
2）在Angularjs Material文档中提到“自定义布局中元素的大小和位置，使用flex，offset和flex-order属性”，我没有看到偏移的例子。
回答by nitin
This is what you need to do..
这是你需要做的..
<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>
Read more about layout here
在此处阅读有关布局的更多信息
回答by Karnith
+1 for nitins answer. It really helped me with my issue. Hereis the plunker showing his answer in a different way using angular material cards.
+1 为 nitins 答案。它真的帮助我解决了我的问题。这是 plunker 使用角材料卡以不同方式显示他的答案。
The html:
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>
The above is in a container-fluid div.
以上是在容器流体 div 中。
