Ionic framework 在ionic中对齐按钮

我正在学习爱奥尼亚，我想在左、中、右对齐我的3个按钮。i、 e.第一个按钮在左边，第二个在中间，第三个在右边

但我不知道怎么做

这是我的密码

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

左图标
右图标

---

有谁能指导我吗？由于我是一名初学者，正在学习ionic。

您可以使用网格来实现这一点，ionic提供了它

它基于12列布局，根据屏幕大小具有不同的断点

默认情况下，对于所有设备和屏幕大小，列在一行内的宽度相等

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

第1页，共2页
第2页，共2页
第1页，共3页
第2页，共3页
三分之三

设置一列的宽度，其他列将围绕该列自动调整大小。这可以使用预定义的网格属性来完成。在下面的示例中，无论中心柱的宽度如何，其他柱都将调整大小

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

第1页，共3页
第2页，共3页（较宽）
三分之三
第1页，共3页
第2页，共3页（较宽）
三分之三

所以你也可以在左，中，右三个按钮。i、 e.第一个按钮位于左侧，第二个按钮位于中间，第三个按钮位于右侧

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

弗斯特
第二
第三

好的，我会解决这个问题@ridhijust FYI

图标左

图标只

按钮内的etc控制图标，不会影响按钮本身的位置。非常感谢您这么好的描述。