कोणीय सामग्री लेआउट, फ्लेक्स और ऑफ़सेट

Question

1) मैं बच्चों के divs को 60% तक फैलाने की कोशिश कर रहा हूं और इसे केंद्र में संरेखित कर रहा हूं लेकिन यह काम नहीं कर रहा है। मैं 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 सामग्री दस्तावेज़ में यह है कि "आकार और तत्वों की स्थिति एक लेआउट में अनुकूलित करने के लिए,, फ्लेक्स ऑफसेट, और फ्लेक्स-आदेश विशेषताओं का उपयोग" बताया गया है देखें मैं ऑफ़सेट का एक उदाहरण न देखें।

Answer 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

Answer 2

nitins का जवाब के लिए +1 के बारे में और अधिक पढ़ें है। यह वास्तव में मेरी समस्या के साथ मेरी मदद की। Here प्लुलर कोणीय सामग्री कार्ड का उपयोग करके एक अलग तरीके से अपना जवाब दिखा रहा है।

एचटीएमएल:

<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 में है।