Layout, Flex and Offset

Question

1) I'm trying to stretch child divs to 60% and center it, but it does not work. I use flex to stretch the div size to 60%. Example 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 the document Material Material Materials it is mentioned that "use the flex, offset and flex-order attributes" to adjust the size and position of elements in the layout ", I do not see an example of offset.

Answer 1

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 the layout here.

Answer 2

+1 for nitin response. It really helped me with my problem. Here is a plunker showing his answer differently using angular material maps.

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 the container fluid.