Align buttons in ionic - ionic-framework

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>

Answer 2

In Ionic 5 you can also use justify classes
<ion-buttons class="ion-justify-content-center">
<ion-button fill="outline" color="medium">
<ion-icon name="add-outline" slot="icon-only"></ion-icon>
</ion-button>
</ion-buttons>

Answer 3

Ionic React
I adopted the above solutions which were great thanks, but also I needed to get a smaller button right in the middle which the solution below fixes
<IonGrid>
<IonRow>
<IonCol size={"4"} className="ion-align-self-start">
<IonButton expand={"block"} onClick={}>
Left
</IonButton>
</IonCol>
<IonCol size={"4"}>
<p style={{ textAlign: "center", margin: 0 }}>
<IonButton onClick={}> Middle </IonButton>
</p>
</IonCol>
<IonCol size={"4"} className="ion-align-self-end">
<IonButton expand={"block"} onClick={}>
Right
</IonButton>
</IonCol>
</IonRow>
</IonGrid>