layout - How to implement dynamic flex value with Angular Material -

i'm trying build div uncertain number of child divs, want child div have flex="100" when there 1 of them, takes entire row. if there more 1 child divs (even if there 3 or 4 child elements), should have flex="50", take half of row.

any idea how that? in advance.

thanks @william s, shouldn't work flex box static size layout.

so work ng-class solve problem.

html:

<div flex layout-fill layout="column" layout-wrap>     <div ng-repeat="function in functions" ng-class="test" class="card-container">         <md-card>             contents         </md-card>     </div> </div> 

my css following:

.test1 {   width: 100%; }  .test2 {   width: 50%; } 

the initial value of $scope.test 'test1',by changing value 'test1' 'test2', width of children divs set 50%.