CSS 工具类

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

注意

如果你的应用不是使用可用的 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-left	text-align: left	行内内容与行框的左边缘对齐。
.ion-text-right	text-align: right	行内内容与行框的右边缘对齐。
.ion-text-start	text-align: start	如果方向是从左到右，则与 text-left 相同；如果方向是从右到左，则与 text-right 相同。
.ion-text-end	text-align: end	如果方向是从左到右，则与 text-right 相同；如果方向是从右到左，则与 text-left 相同。
.ion-text-center	text-align: center	行内内容在行框内居中。
.ion-text-justify	text-align: justify	行内内容对齐。文本应间距以使其左右边缘与行框的左右边缘对齐，但最后一行除外。
.ion-text-wrap	white-space: normal	空白字符序列将被折叠。源代码中的换行符将被视为其他空白字符。根据需要换行以填充行框。
.ion-text-nowrap	white-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-uppercase	text-transform: uppercase	强制所有字符转换为大写。
.ion-text-lowercase	text-transform: lowercase	强制所有字符转换为小写。
.ion-text-capitalize	text-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>no float</h3>
      <img
        alt="Silhouette of a person's head"
        src="https://ionicframework.cn/docs/img/demos/avatar.svg"
        height="50px"
      />
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem.
    </ion-col>
    <ion-col>
      <h3>float-left</h3>
      <img
        alt="Silhouette of a person's head"
        src="https://ionicframework.cn/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>float-right</h3>
      <img
        alt="Silhouette of a person's head"
        src="https://ionicframework.cn/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-left	float: left	元素将浮动在其包含块的左侧。
.ion-float-right	float: right	元素将浮动在其包含块的右侧。
.ion-float-start	float: left / float: right	如果方向是从左到右，则与 float-left 相同；如果方向是从右到左，则与 float-right 相同。
.ion-float-end	float: 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 属性确定元素是否应该可见。如果元素被隐藏，它将仍然在 DOM 中，但不会被渲染。

<ion-grid>
  <ion-row>
    <ion-col class="ion-hide">
      <div>
        <h3>hidden</h3>
        You can't see me.
      </div>
    </ion-col>
    <ion-col>
      <div>
        <h3>not-hidden</h3>
        You can see me!
      </div>
    </ion-col>
  </ion-row>
</ion-grid>

类	样式规则	描述
.ion-hide	display: 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）时，将修饰符应用于元素。

内容空间

元素填充

padding 类设置元素的填充区域。填充区域是元素内容与其边框之间的空间。

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

<ion-grid>
  <ion-row>
    <ion-col class="ion-padding">
      <div>padding</div>
    </ion-col>
    <ion-col class="ion-padding-top">
      <div>padding-top</div>
    </ion-col>
    <ion-col class="ion-padding-start">
      <div>padding-start</div>
    </ion-col>
    <ion-col class="ion-padding-end">
      <div>padding-end</div>
    </ion-col>
  </ion-row>
  <ion-row>
    <ion-col class="ion-padding-bottom">
      <div>padding-bottom</div>
    </ion-col>
    <ion-col class="ion-padding-vertical">
      <div>padding-vertical</div>
    </ion-col>
    <ion-col class="ion-padding-horizontal">
      <div>padding-horizontal</div>
    </ion-col>
    <ion-col class="ion-no-padding">
      <div>no-padding</div>
    </ion-col>
  </ion-row>
</ion-grid>

类	样式规则	描述
.ion-padding	padding: 16px	应用于所有边的填充。
.ion-padding-top	padding-top: 16px	应用于顶部的填充。
.ion-padding-start	padding-start: 16px	应用于开始处的填充。
.ion-padding-end	padding-end: 16px	应用于结束处的填充。
.ion-padding-bottom	padding-bottom: 16px	应用于底部的填充。
.ion-padding-vertical	padding: 16px 0	应用于顶部和底部的填充。
.ion-padding-horizontal	padding: 0 16px	应用于左侧和右侧的填充。
.ion-no-padding	padding: 0	应用于所有边的无填充。

元素边距

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

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

<ion-grid>
  <ion-row>
    <ion-col class="ion-margin">
      <div>margin</div>
    </ion-col>
    <ion-col class="ion-margin-top">
      <div>margin-top</div>
    </ion-col>
    <ion-col class="ion-margin-start">
      <div>margin-start</div>
    </ion-col>
    <ion-col class="ion-margin-end">
      <div>margin-end</div>
    </ion-col>
  </ion-row>
  <ion-row>
    <ion-col class="ion-margin-bottom">
      <div>margin-bottom</div>
    </ion-col>
    <ion-col class="ion-margin-vertical">
      <div>margin-vertical</div>
    </ion-col>
    <ion-col class="ion-margin-horizontal">
      <div>margin-horizontal</div>
    </ion-col>
    <ion-col class="ion-no-margin">
      <div>no-margin</div>
    </ion-col>
  </ion-row>
</ion-grid>

类	样式规则	描述
.ion-margin	margin: 16px	应用于所有边的边距。
.ion-margin-top	margin-top: 16px	应用于顶部的边距。
.ion-margin-start	margin-start: 16px	应用于左侧的边距。
.ion-margin-end	margin-end: 16px	应用于右侧的边距。
.ion-margin-bottom	margin-bottom: 16px	应用于底部的边距。
.ion-margin-vertical	margin: 16px 0	应用于顶部和底部的边距。
.ion-margin-horizontal	margin: 0 16px	应用于左侧和右侧的边距。
.ion-no-margin	margin: 0	应用于所有边的无边距。

Flex 属性

Flex 容器属性

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

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

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

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

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

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

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

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

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

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

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

类	样式规则	描述
.ion-justify-content-start	justify-content: flex-start	项目在主轴上向开始处打包。
.ion-justify-content-end	justify-content: flex-end	项目在主轴上向结束处打包。
.ion-justify-content-center	justify-content: center	项目沿着主轴居中。
.ion-justify-content-around	justify-content: space-around	项目均匀分布在主轴上，周围有相等的间距。
.ion-justify-content-between	justify-content: space-between	项目均匀分布在主轴上。
.ion-justify-content-evenly	justify-content: space-evenly	项目分布使得任何两个项目之间的间距相等。
.ion-align-items-start	align-items: flex-start	项目在交叉轴上向开始处打包。
.ion-align-items-end	align-items: flex-end	项目在交叉轴上向结束处打包。
.ion-align-items-center	align-items: center	项目沿着交叉轴居中。
.ion-align-items-baseline	align-items: baseline	项目对齐，使其基线对齐。
.ion-align-items-stretch	align-items: stretch	项目拉伸以填充容器。
.ion-nowrap	flex-wrap: nowrap	所有项目都将在同一行上。
.ion-wrap	flex-wrap: wrap	项目将从上到下换行到多行。
.ion-wrap-reverse	flex-wrap: wrap-reverse	项目将从下到上换行到多行。

Flex 项目属性

<ion-grid>
  <ion-row>
    <ion-col class="ion-align-self-start">
      <div>1 of 4</div>
    </ion-col>
    <ion-col class="ion-align-self-center">
      <div>2 of 4</div>
    </ion-col>
    <ion-col class="ion-align-self-end">
      <div>3 of 4</div>
    </ion-col>
    <ion-col>
      <div>4 of 4 # # #</div>
    </ion-col>
  </ion-row>
</ion-grid>

类	样式规则	描述
.ion-align-self-start	align-self: flex-start	项目在交叉轴上向开始处打包。
.ion-align-self-end	align-self: flex-end	项目在交叉轴上向结束处打包。
.ion-align-self-center	align-self: center	项目沿着交叉轴居中。
.ion-align-self-baseline	align-self: baseline	项目对齐，使其基线与其他项目基线对齐。
.ion-align-self-stretch	align-self: stretch	项目拉伸以填充容器。
.ion-align-self-auto	align-self: auto	项目根据父级的 align-items 值进行定位。

边框显示

边框显示 CSS 属性决定是否应显示边框。该属性可以应用于 ion-header 和 ion-footer。

<ion-header class="ion-no-border">
  <ion-toolbar>
    <ion-title>Header - No Border</ion-title>
  </ion-toolbar>
</ion-header>

<ion-footer class="ion-no-border">
  <ion-toolbar>
    <ion-title>Footer - No Border</ion-title>
  </ion-toolbar>
</ion-footer>

类	描述
.ion-no-border	元素将没有边框。

Ionic 断点

Ionic 在媒体查询中使用断点，以便根据屏幕尺寸以不同的方式设置应用程序样式。以下断点名称用于上面列出的实用程序类，其中该类将在满足宽度时应用。

断点名称	宽度
xs	0
sm	576px
md	768px
lg	992px
xl	1200px