How to evenly spread <ion-button>'s across a page?

Ionic Framework
1

I have 3 ion-cols below, with an ion-button in each.

As you can see from the image, they are not evenly spread across the screen:

before

Here is my current HTML:

    <ion-row class="bottom-bar">
      <ion-col>
        <ion-button fill="clear" size="small" color="danger" class="border-right">
          <ion-icon slot="start" name="thumbs-up"></ion-icon>
          <small>12</small>
        </ion-button>
      </ion-col>
      <ion-col>
        <ion-button fill="clear" size="small" color="danger" class="border-right">
          <ion-icon slot="start" name="text"></ion-icon>
          <small>12 Comments</small>
        </ion-button>
      </ion-col>
      <ion-col>
        <ion-button fill="clear" size="small" color="danger">
            <small>12 minutes ago</small>
        </ion-button>
      </ion-col>
    </ion-row>

In order to spread the buttons across the page evenly, I tried to add expand="full" to each ion-button, but that doesn’t change anything.

Can someone please tell me what changes are required for this?

2

You could try using “Flex” on the ion-row add a class with display: flex and for each ion-col add the property flex: 1 on your CSS.

3

Here is mine.
Seems only difference is using ion-grid as outer instead of ion-row, and the css custom properties as provided.
I am assuming v5.

Grid Css Custom Properties

<section>
       <ion-grid>
         <ion-row class="ion-justify-content-center">
            <ion-col class="ion-align-self-center">
              <ion-button color="danger" expand="block" size="default" fill="solid">CANCEL</ion-button>  
            </ion-col>
            <ion-col class="ion-align-self-center">
              <ion-button color="primary" expand="block" size="default" fill="solid">EDIT</ion-button> 
            </ion-col>
            <ion-col class="ion-align-self-center">          
              <ion-button color="success" expand="block" size="default" fill="solid" >NEXT</ion-button>
            </ion-col>
         </ion-row>
       </ion-grid>
    </section>