CODEWITHSUNDEEP
htmlcssresponsive-designflexboxangularjs-material
BB Developer
BB Developer

Reputation: 374

Center a div with flex = 33

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

Upvotes: 1

Views: 974

Answers (1)

kuhnroyal
kuhnroyal

Reputation: 7553

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

Upvotes: 2

Related Questions