1

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 enter image description here

After adding it: enter image description here

4

1 回答 1

2

您可以通过使用flex-offset="33"或添加layout-align="center" layout="row"父级来实现这一点。我可能会使用第二个。

<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>

或者

<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

于 2016-03-06T15:48:43.820 回答