Align buttons in ionic

Question

I am learning ionic and i want to align my 3 buttons in left,center and right. i.e. First button in left, second in center and third one in right.

But I don't know how to do it?

Here is My code.

<div>
    <button ion-button icon-left>
            <ion-icon name="home"></ion-icon>
            Left Icon
        </button>

        <button ion-button icon-only>
            <ion-icon name="home"></ion-icon>
        </button>

        <button ion-button icon-right>
            Right Icon
            <ion-icon name="home"></ion-icon>
        </button>
  </div>

Can Anyone guide me with this? As I am a beginner and learning ionic.

Answer 1

You can achieve this using Grid, ionic provide it grid link

It is based on a 12 column layout with different breakpoints based on the screen size.

By default, columns will take up equal width inside of a row for all devices and screen sizes.

<ion-grid>
  <ion-row>
    <ion-col>
      1 of 2
    </ion-col>
    <ion-col>
      2 of 2
    </ion-col>
  </ion-row>
  <ion-row>
    <ion-col>
      1 of 3
    </ion-col>
    <ion-col>
      2 of 3
    </ion-col>
    <ion-col>
      3 of 3
    </ion-col>
  </ion-row>
</ion-grid>

Set the width of one column and the others will automatically resize around it. This can be done using our predefined grid attributes. In the example below, the other columns will resize no matter the width of the center column.

<ion-grid>
  <ion-row>
    <ion-col>
      1 of 3
    </ion-col>
    <ion-col col-8>
      2 of 3 (wider)
    </ion-col>
    <ion-col>
      3 of 3
    </ion-col>
  </ion-row>
  <ion-row>
    <ion-col>
      1 of 3
    </ion-col>
    <ion-col col-6>
      2 of 3 (wider)
    </ion-col>
    <ion-col>
      3 of 3
    </ion-col>
  </ion-row>
</ion-grid>

So you also can 3 buttons in left,center and right. i.e. First button in left, second in center and third one in right using grid.

 <ion-grid>
    <ion-row>
      <ion-col col-4>
        <button ion-button>
          First
        </button>
      </ion-col>

      <ion-col col-4>
        <button ion-button>
          Second
        </button>
      </ion-col>

      <ion-col col-4>
        <button ion-button>
          Third
        </button>
      </ion-col>
    </ion-row>
  </ion-grid>