跳到主要内容
版本：v7

CSS 工具类

Ionic Framework 提供了一组 CSS 工具类，可用于任何元素，以修改文本、元素位置或调整内边距和外边距。

important

如果您的应用不是使用可用的 Ionic Framework 启动器创建的，则需要包含全局样式表可选部分中列出的样式表，这些样式才能生效。

文本修改​

文本对齐​

<ion-grid>
  <ion-row>
    <ion-col>
      <div class="ion-text-start">
        <h3>text-start</h3>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem.
      </div>
    </ion-col>
    <ion-col>
      <div class="ion-text-end">
        <h3>text-end</h3>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem.
      </div>
    </ion-col>
    <ion-col>
      <div class="ion-text-center">
        <h3>text-center</h3>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem.
      </div>
    </ion-col>
  </ion-row>
  <ion-row>
    <ion-col>
      <div class="ion-text-justify">
        <h3>text-justify</h3>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem.
      </div>
    </ion-col>
    <ion-col>
      <div class="ion-text-wrap">
        <h3>text-wrap</h3>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem.
      </div>
    </ion-col>
    <ion-col>
      <div class="ion-text-nowrap">
        <h3>text-nowrap</h3>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      </div>
    </ion-col>
  </ion-row>
</ion-grid>
类样式规则描述
.ion-text-lefttext-align: left行内内容与行框的左边缘对齐。
.ion-text-righttext-align: right行内内容与行框的右边缘对齐。
.ion-text-starttext-align: start如果方向为从左到右，则等同于 text-left；如果方向为从右到左，则等同于 text-right。
.ion-text-endtext-align: end如果方向为从左到右，则等同于 text-right；如果方向为从右到左，则等同于 text-left。
.ion-text-centertext-align: center行内内容在行框内居中。
.ion-text-justifytext-align: justify行内内容两端对齐。文本应均匀分布，使左右边缘与行框的左右边缘对齐，最后一行除外。
.ion-text-wrapwhite-space: normal空白序列被折叠。源代码中的换行符与其他空白符一样处理。根据需要换行以填充行框。
.ion-text-nowrapwhite-space: nowrap空白符折叠方式与 normal 相同，但禁止文本内换行。

文本转换​

<ion-grid>
  <ion-row>
    <ion-col>
      <div class="ion-text-uppercase">
        <h3>text-uppercase</h3>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem.
      </div>
    </ion-col>
    <ion-col>
      <div class="ion-text-lowercase">
        <h3>text-lowercase</h3>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem.
      </div>
    </ion-col>
    <ion-col>
      <div class="ion-text-capitalize">
        <h3>text-capitalize</h3>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem.
      </div>
    </ion-col>
  </ion-row>
</ion-grid>
类样式规则描述
.ion-text-uppercasetext-transform: uppercase强制所有字符转换为大写。
.ion-text-lowercasetext-transform: lowercase强制所有字符转换为小写。
.ion-text-capitalizetext-transform: capitalize强制每个单词的首字母转换为大写。

响应式文本类​

上面列出的所有文本类都有额外的类，可根据屏幕大小修改文本。将每个类中的 text- 替换为 text-{breakpoint}-，以仅在特定屏幕尺寸上使用该类，其中 {breakpoint} 是 Ionic 断点中列出的断点名称之一。

下表显示了默认行为，其中 {modifier} 是以下任一值：left、right、start、end、center、justify、wrap、nowrap、uppercase、lowercase 或 capitalize，如上所述。

类描述
.ion-text-{modifier}在所有屏幕尺寸上对元素应用修饰符。
.ion-text-sm-{modifier}当 min-width: 576px 时对元素应用修饰符。
.ion-text-md-{modifier}当 min-width: 768px 时对元素应用修饰符。
.ion-text-lg-{modifier}当 min-width: 992px 时对元素应用修饰符。
.ion-text-xl-{modifier}当 min-width: 1200px 时对元素应用修饰符。

元素放置​

浮动元素​

float CSS 属性指定元素应沿其容器的左侧或右侧放置，文本和内联元素将环绕它。这样，元素脱离了网页的正常流，但与绝对定位不同，它仍然保留在流中。

<ion-grid>
  <ion-row>
    <ion-col>
      <h3>不浮动</h3>
      <img
        alt="人物头像剪影"
        src="https://ionicframework.com/docs/img/demos/avatar.svg"
        height="50px"
      />
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem.
    </ion-col>
    <ion-col>
      <h3>左浮动</h3>
      <img
        alt="人物头像剪影"
        src="https://ionicframework.com/docs/img/demos/avatar.svg"
        height="50px"
        class="ion-float-left"
      />
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem.
    </ion-col>
    <ion-col>
      <h3>右浮动</h3>
      <img
        alt="人物头像剪影"
        src="https://ionicframework.com/docs/img/demos/avatar.svg"
        height="50px"
        class="ion-float-right"
      />
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem.
    </ion-col>
  </ion-row>
</ion-grid>
类样式规则描述
.ion-float-leftfloat: left元素将浮动在其包含块的左侧。
.ion-float-rightfloat: right元素将浮动在其包含块的右侧。
.ion-float-startfloat: left / float: right如果方向为从左到右，则等同于 float-left；如果方向为从右到左，则等同于 float-right。
.ion-float-endfloat: left / float: right如果方向为从左到右，则等同于 float-right；如果方向为从右到左，则等同于 float-left。

响应式浮动类​

上面列出的所有浮动类都有额外的类，可根据屏幕大小修改浮动行为。将每个类中的 float- 替换为 float-{breakpoint}-，以仅在特定屏幕尺寸上使用该类，其中 {breakpoint} 是 Ionic 断点中列出的断点名称之一。

下表显示了默认行为，其中 {modifier} 是以下任一值：left、right、start 或 end，如上所述。

类描述
.ion-float-{modifier}在所有屏幕尺寸上对元素应用修饰符。
.ion-float-sm-{modifier}当 min-width: 576px 时对元素应用修饰符。
.ion-float-md-{modifier}当 min-width: 768px 时对元素应用修饰符。
.ion-float-lg-{modifier}当 min-width: 992px 时对元素应用修饰符。
.ion-float-xl-{modifier}当 min-width: 1200px 时对元素应用修饰符。

元素显示​

display CSS 属性设置元素是被视为块级还是内联框，以及用于其子元素的布局，如流式布局、网格或 flex。它还可以用于从布局中完全隐藏元素。

<ion-grid>
  <ion-row>
    <ion-col class="ion-hide">
      <div>
        <h3>隐藏</h3>
        你看不到我。
      </div>
    </ion-col>
    <ion-col>
      <div>
        <h3>未隐藏</h3>
        你能看到我！
      </div>
    </ion-col>
  </ion-row>
</ion-grid>
类样式规则描述
.ion-hidedisplay: none元素将被隐藏。

响应式显示类​

还有一些额外的类可根据屏幕大小修改可见性。对于所有屏幕尺寸，不仅仅是使用 .ion-hide，还可以使用 .ion-hide-{breakpoint}-{dir} 来仅在特定屏幕尺寸上使用该类，其中 {breakpoint} 是 Ionic 断点中列出的断点名称之一，{dir} 表示元素应在指定断点以上的所有屏幕尺寸（up）还是以下的所有屏幕尺寸（down）隐藏。

类描述
.ion-hide-sm-{dir}当 min-width: 576px（up）或 max-width: 576px（down）时对元素应用修饰符。
.ion-hide-md-{dir}当 min-width: 768px（up）或 max-width: 768px（down）时对元素应用修饰符。
.ion-hide-lg-{dir}当 min-width: 992px（up）或 max-width: 992px（down）时对元素应用修饰符。
.ion-hide-xl-{dir}当 min-width: 1200px（up）或 max-width: 1200px（down）时对元素应用修饰符。

内容间距​

内边距​

内边距类用于设置元素的内边距区域。内边距区域是元素内容与其边框之间的空间。

默认应用的内边距量为 16px，由 --ion-padding 变量设置。有关如何更改这些值的更多信息，请参阅 CSS 变量部分。

<ion-grid>
  <ion-row>
    <ion-col class="ion-padding">
      <div>内边距</div>
    </ion-col>
    <ion-col class="ion-padding-top">
      <div>上内边距</div>
    </ion-col>
    <ion-col class="ion-padding-start">
      <div>起始内边距</div>
    </ion-col>
    <ion-col class="ion-padding-end">
      <div>结束内边距</div>
    </ion-col>
  </ion-row>
  <ion-row>
    <ion-col class="ion-padding-bottom">
      <div>下内边距</div>
    </ion-col>
    <ion-col class="ion-padding-vertical">
      <div>垂直内边距</div>
    </ion-col>
    <ion-col class="ion-padding-horizontal">
      <div>水平内边距</div>
    </ion-col>
    <ion-col class="ion-no-padding">
      <div>无内边距</div>
    </ion-col>
  </ion-row>
</ion-grid>
类样式规则描述
.ion-paddingpadding: 16px在所有边上应用内边距。
.ion-padding-toppadding-top: 16px在顶部应用内边距。
.ion-padding-startpadding-start: 16px在起始边应用内边距。
.ion-padding-endpadding-end: 16px在结束边应用内边距。
.ion-padding-bottompadding-bottom: 16px在底部应用内边距。
.ion-padding-verticalpadding: 16px 0在顶部和底部应用内边距。
.ion-padding-horizontalpadding: 0 16px在左侧和右侧应用内边距。
.ion-no-paddingpadding: 0在所有边上不应用内边距。

外边距​

外边距区域用空白区域扩展边框区域，用于将元素与其相邻元素分隔开。

默认应用的外边距量为 16px，由 --ion-margin 变量设置。有关如何更改这些值的更多信息，请参阅 CSS 变量部分。

<ion-grid>
  <ion-row>
    <ion-col class="ion-margin">
      <div>外边距</div>
    </ion-col>
    <ion-col class="ion-margin-top">
      <div>上外边距</div>
    </ion-col>
    <ion-col class="ion-margin-start">
      <div>起始外边距</div>
    </ion-col>
    <ion-col class="ion-margin-end">
      <div>结束外边距</div>
    </ion-col>
  </ion-row>
  <ion-row>
    <ion-col class="ion-margin-bottom">
      <div>下外边距</div>
    </ion-col>
    <ion-col class="ion-margin-vertical">
      <div>垂直外边距</div>
    </ion-col>
    <ion-col class="ion-margin-horizontal">
      <div>水平外边距</div>
    </ion-col>
    <ion-col class="ion-no-margin">
      <div>无外边距</div>
    </ion-col>
  </ion-row>
</ion-grid>
类样式规则描述
.ion-marginmargin: 16px在所有边上应用外边距。
.ion-margin-topmargin-top: 16px在顶部应用外边距。
.ion-margin-startmargin-start: 16px在左侧应用外边距。
.ion-margin-endmargin-end: 16px在右侧应用外边距。
.ion-margin-bottommargin-bottom: 16px在底部应用外边距。
.ion-margin-verticalmargin: 16px 0在顶部和底部应用外边距。
.ion-margin-horizontalmargin: 0 16px在左侧和右侧应用外边距。
.ion-no-marginmargin: 0在所有边上不应用外边距。

Flex 属性​

Flex 容器属性​

<ion-grid>
  <ion-row class="ion-justify-content-start">
    <ion-col size="3">
      <div>1 / 2</div>
    </ion-col>
    <ion-col size="3">
      <div>2 / 2</div>
    </ion-col>
  </ion-row>

  <ion-row class="ion-justify-content-center">
    <ion-col size="3">
      <div>1 / 2</div>
    </ion-col>
    <ion-col size="3">
      <div>2 / 2</div>
    </ion-col>
  </ion-row>

  <ion-row class="ion-justify-content-end">
    <ion-col size="3">
      <div>1 / 2</div>
    </ion-col>
    <ion-col size="3">
      <div>2 / 2</div>
    </ion-col>
  </ion-row>

  <ion-row class="ion-justify-content-around">
    <ion-col size="3">
      <div>1 / 2</div>
    </ion-col>
    <ion-col size="3">
      <div>2 / 2</div>
    </ion-col>
  </ion-row>

  <ion-row class="ion-justify-content-between">
    <ion-col size="3">
      <div>1 / 2</div>
    </ion-col>
    <ion-col size="3">
      <div>2 / 2</div>
    </ion-col>
  </ion-row>

  <ion-row class="ion-justify-content-evenly">
    <ion-col size="3">
      <div>1 / 2</div>
    </ion-col>
    <ion-col size="3">
      <div>2 / 2</div>
    </ion-col>
  </ion-row>
</ion-grid>

<ion-grid>
  <ion-row class="ion-align-items-start">
    <ion-col>
      <div>1 / 4</div>
    </ion-col>
    <ion-col>
      <div>2 / 4</div>
    </ion-col>
    <ion-col>
      <div>3 / 4</div>
    </ion-col>
    <ion-col>
      <div>4 / 4 # # #</div>
    </ion-col>
  </ion-row>

  <ion-row class="ion-align-items-end">
    <ion-col>
      <div>1 / 4</div>
    </ion-col>
    <ion-col>
      <div>2 / 4</div>
    </ion-col>
    <ion-col>
      <div>3 / 4</div>
    </ion-col>
    <ion-col>
      <div>4 / 4 # # #</div>
    </ion-col>
  </ion-row>

  <ion-row class="ion-align-items-center">
    <ion-col>
      <div>1 / 4</div>
    </ion-col>
    <ion-col>
      <div>2 / 4</div>
    </ion-col>
    <ion-col>
      <div>3 / 4</div>
    </ion-col>
    <ion-col>
      <div>4 / 4 # # #</div>
    </ion-col>
  </ion-row>

  <ion-row class="ion-align-items-baseline">
    <ion-col>
      <div>1 / 4</div>
    </ion-col>
    <ion-col>
      <div>2 / 4</div>
    </ion-col>
    <ion-col>
      <div>3 / 4</div>
    </ion-col>
    <ion-col>
      <div>4 / 4 # # #</div>
    </ion-col>
  </ion-row>

  <ion-row class="ion-align-items-stretch">
    <ion-col>
      <div>1 / 4</div>
    </ion-col>
    <ion-col>
      <div>2 / 4</div>
    </ion-col>
    <ion-col>
      <div>3 / 4</div>
    </ion-col>
    <ion-col>
      <div>4 / 4 # # #</div>
    </ion-col>
  </ion-row>
</ion-grid>
类样式规则描述
.ion-justify-content-startjustify-content: flex-start项目在主轴方向靠起始端排列。
.ion-justify-content-endjustify-content: flex-end项目在主轴方向靠末端排列。
.ion-justify-content-centerjustify-content: center项目在主轴方向居中排列。
.ion-justify-content-aroundjustify-content: space-around项目在主轴方向均匀分布，周围间距相等。
.ion-justify-content-betweenjustify-content: space-between项目在主轴方向均匀分布。
.ion-justify-content-evenlyjustify-content: space-evenly项目均匀分布，任意两个项目之间的间距相等。
.ion-align-items-startalign-items: flex-start项目在交叉轴方向靠起始端排列。
.ion-align-items-endalign-items: flex-end项目在交叉轴方向靠末端排列。
.ion-align-items-centeralign-items: center项目在交叉轴方向居中排列。
.ion-align-items-baselinealign-items: baseline项目对齐方式使其基线对齐。
.ion-align-items-stretchalign-items: stretch项目拉伸以填充容器。
.ion-nowrapflex-wrap: nowrap项目将全部在一行上。
.ion-wrapflex-wrap: wrap项目将换行到多行，从上到下排列。
.ion-wrap-reverseflex-wrap: wrap-reverse项目将换行到多行，从下到上排列。

Flex 项目属性​

<ion-grid>
  <ion-row>
    <ion-col class="ion-align-self-start">
      <div>1 / 4</div>
    </ion-col>
    <ion-col class="ion-align-self-center">
      <div>2 / 4</div>
    </ion-col>
    <ion-col class="ion-align-self-end">
      <div>3 / 4</div>
    </ion-col>
    <ion-col>
      <div>4 / 4 # # #</div>
    </ion-col>
  </ion-row>
</ion-grid>
类样式规则描述
.ion-align-self-startalign-self: flex-start项目在交叉轴方向靠起始端排列。
.ion-align-self-endalign-self: flex-end项目在交叉轴方向靠末端排列。
.ion-align-self-centeralign-self: center项目在交叉轴方向居中排列。
.ion-align-self-baselinealign-self: baseline项目对齐方式使其基线与其他项目的基线对齐。
.ion-align-self-stretchalign-self: stretch项目拉伸以填充容器。
.ion-align-self-autoalign-self: auto项目根据父元素的 align-items 值进行定位。

边框显示​

.ion-no-border 工具类可用于移除 Ionic 组件的边框。此类可应用于 ion-header 和 ion-footer 组件。

<ion-header class="ion-no-border">
  <ion-toolbar>
    <ion-title>页眉 - 无边框</ion-title>
  </ion-toolbar>
</ion-header>

<ion-footer class="ion-no-border">
  <ion-toolbar>
    <ion-title>页脚 - 无边框</ion-title>
  </ion-toolbar>
</ion-footer>
类描述
.ion-no-border元素将没有边框。

Ionic 断点​

Ionic 使用媒体查询中的断点根据屏幕大小以不同的方式样式化应用。以下断点名称用于上述工具类，当满足宽度条件时将应用该类。

断点名称宽度
xs0
sm576px
md768px
lg992px
xl1200px

目录

编辑此页