Center a div with flex = 33 - html

Question

Thank you for taking a look at my question. I have a div that is expanding across the page horizontally, which is what I want. I have 4 buttons in the div and I am using:
<div layout="row" layout-align="space-around center" layout-sm="column" layout-fill layout-wrap >
Which is good. However, it is taking up the whole div so the buttons look awkwardly spaced out. So I added flex="33" and now they are spaced out, but stuck in using only a third of the page which is what I want and it looks good. The issue I have is it is taking up the first third and I want it to use up the second third of the page. Is there a way to do this with out creating unnecessary divs to occupy the first third?
Here is the complete code:
<div flex="33" layout="row" layout-align="space-around center" layout-sm="column" layout-fill layout-wrap class="pageNavButtons">
<div ng-repeat="button in navPage" layout="column" layout-align="center center" style="color: #ffffff">
<label>{{button.div}}</label>
<span></span>
<md-icon md-svg-src="{{button.icon}}"></md-icon>
</div>
</div>
I do not have any CSS with it yet.
Images:
Before flex=33
After adding it:

Answer 1

You can achieve that by either using flex-offset="33" or by adding layout-align="center" layout="row"on the parent. I would probably use the second one.
<div div layout="row" flex-offset="33">
<div flex="33" layout="row" layout-align="space-around center" layout-sm="column" layout-fill layout-wrap class="pageNavButtons">
<div ng-repeat="button in navPage" layout="column" layout-align="center center" style="color: #ffffff">
<label> {{button.div}}</label>
<span>----- </span>
<md-icon md-svg-src ={{button.icon}}></md-icon>
</div>
</div>
</div>
or
<div layout="row" layout-align="center">
<div flex="33" layout="row" layout-align="space-around center" layout-sm="column" layout-fill layout-wrap class="pageNavButtons">
<div ng-repeat="button in navPage" layout="column" layout-align="center center" style="color: #ffffff">
<label> {{button.div}}</label>
<span>----- </span>
<md-icon md-svg-src ={{button.icon}}></md-icon>
</div>
</div>
</div>
http://codepen.io/kuhnroyal/pen/mPVdRK