Ionic中三个按钮左、中、右对齐实现方法咨询

嘿，我来帮你搞定这个按钮对齐的问题！在Ionic里实现左、中、右三个按钮的布局，有几种简单又靠谱的方法，刚好匹配你的需求，下面给你详细说：

方法一：用Ionic内置的Grid网格系统 #

Ionic的Grid是基于Flex布局封装的，用它来做对齐特别直观，代码也清晰：

<ion-grid>
  <ion-row align-items-center>
    <!-- 左对齐按钮 -->
    <ion-col text-left>
      <button ion-button icon-left>
        <ion-icon name="home"></ion-icon> Left Icon
      </button>
    </ion-col>
    <!-- 居中按钮 -->
    <ion-col text-center>
      <button ion-button icon-only>
        <ion-icon name="home"></ion-icon>
      </button>
    </ion-col>
    <!-- 右对齐按钮 -->
    <ion-col text-right>
      <button ion-button icon-right>
        Right Icon <ion-icon name="home"></ion-icon>
      </button>
    </ion-col>
  </ion-row>
</ion-grid>

代码说明： #

• ion-grid 是网格容器，ion-row 是行容器，align-items-center 让按钮在垂直方向居中对齐
• 三个 ion-col 会自动平分行的宽度，分别用 text-left、text-center、text-right 这三个Ionic内置的类来控制内部按钮的水平对齐

方法二：直接用Flex布局（更轻量化） #

如果你不想用Grid，直接给外层容器加Flex样式也能快速实现：

<div style="display: flex; width: 100%; justify-content: space-between; align-items: center;">
  <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>

代码说明： #

• display: flex 把容器变成Flex布局
• justify-content: space-between 会让第一个按钮贴左、最后一个贴右，中间的按钮自动居中
• align-items: center 保证三个按钮在垂直方向对齐

额外场景：如果是在工具栏（Toolbar）里 #

如果你的按钮是放在页面的工具栏中，用Ionic的slot属性会更符合组件规范：

<ion-toolbar>
  <button ion-button icon-left slot="start">
    <ion-icon name="home"></ion-icon> Left Icon
  </button>
  <div slot="middle">
    <button ion-button icon-only>
      <ion-icon name="home"></ion-icon>
    </button>
  </div>
  <button ion-button icon-right slot="end">
    Right Icon <ion-icon name="home"></ion-icon>
  </button>
</ion-toolbar>

slot="start"、slot="middle"、slot="end" 是Toolbar内置的位置插槽，能自动帮你把元素分配到左、中、右三个位置，不用自己写样式~

内容的提问来源于stack exchange，提问作者Riddhi Shah