盘点Ionic官方开箱即用的CSS类

Ionic官方提供了很多开箱即用的CSS类，我们要尽可能地经常使用他们，这样能让我们轻松一些，少些一些CSS代码。

用法示例：

<div class="ion-text-left">
    balabalabala
</div>

文本对齐类

Class	Style Rule	Description
`.ion-text-left`	`text-align: left`	文字靠左。
`.ion-text-right`	`text-align: right`	文字靠右。
`.ion-text-start`	`text-align: start`	如果排布顺序为从左至右的话和 `ion-text-left` 效果一样，反之与 `ion-text-right` 效果一样。
`.ion-text-end`	`text-align: end`	如果排布顺序为从左至右的话和 `ion-text-right` 效果一样，反之与 `ion-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`	不换行，超出的文字会被隐藏掉。

文本对齐类（在指定的屏幕大小下生效）

Class	Description
`.ion-text-{modifier}`	所有的屏幕尺寸小都会生效。
`.ion-text-sm-{modifier}`	屏幕尺寸大于 576px才会生效。
`.ion-text-md-{modifier}`	屏幕尺寸大于768px才会生效。
`.ion-text-lg-{modifier}`	屏幕尺寸大于992px才会生效。
`.ion-text-xl-{modifier}`	屏幕尺寸大于1200px才会生效。

这里大括号里面的modifier可以是上一张表里面的right,left,center等等。

大小写转换类

Class	Style Rule	Description
`.ion-text-uppercase`	`text-transform: uppercase`	强制转换为大写字母。
`.ion-text-lowercase`	`text-transform: lowercase`	强制转换为小写字母。
`.ion-text-capitalize`	`text-transform: capitalize`	强制把每个单词的首字母转为大写。

元素对齐类

Class	Style Rule	Description
`.ion-float-left`	`float: left`	元素会漂浮在包含它的块级元素的左侧。
`.ion-float-right`	`float: right`	元素会漂浮在包含它的块级元素的右侧。
`.ion-float-start`	`float: left` / `float: right`	元素会漂浮在起始侧。
`.ion-float-end`	`float: left` / `float: right`	元素会漂浮在尾部。

元素对齐类（在指定屏幕大小下生效）

Class	Description
`.ion-float-{modifier}`	所有的屏幕尺寸小都会生效。
`.ion-float-sm-{modifier}`	屏幕尺寸大于 576px才会生效。
`.ion-float-md-{modifier}`	屏幕尺寸大于768px才会生效。
`.ion-float-lg-{modifier}`	屏幕尺寸大于992px才会生效。
`.ion-float-xl-{modifier}`	屏幕尺寸大于1200px才会生效。

元素展示类

Class	Style Rule	Description
`.ion-hide`	`display: none`	元素会被隐藏。

元素展示类（在指定屏幕大小下生效）

Class	Description
`.ion-hide-sm-{dir}`	`min-width: 576px` (`up`) or `max-width: 576px` (`down`)的情况下生效（没有用过，不知道咋翻译，要用的话，自己去试一试。）
`.ion-hide-md-{dir}`	`min-width: 768px` (`up`) or `max-width: 768px` (`down`)的情况下生效。
`.ion-hide-lg-{dir}`	`min-width: 992px` (`up`) or `max-width: 992px` (`down`)的情况下生效。
`.ion-hide-xl-{dir}`	`min-width: 1200px` (`up`) or `max-width: 1200px` (`down`)的情况下生效。

内容间距控制类（内边距）

Class	Style Rule	Description
`.ion-padding`	`padding: 16px`	四边的内边距为16px。
`.ion-padding-top`	`padding-top: 16px`	顶部内边距为16px。
`.ion-padding-start`	`padding-start: 16px`	起始边内边距为16px。
`.ion-padding-end`	`padding-end: 16px`	尾部内边距为16px。
`.ion-padding-bottom`	`padding-bottom: 16px`	底部内边距为16px。
`.ion-padding-vertical`	`padding: 16px 0`	上下内边距为16px，左右为0。
`.ion-padding-horizontal`	`padding: 0 16px`	左右内边距为16px，上下为0。
`.ion-no-padding`	`padding: 0`	四边内边距都为0。

内容间距控制类（外边距）

Class	Style Rule	Description
`.ion-margin`	`margin: 16px`	四边的外边距为16px。
`.ion-margin-top`	`margin-top: 16px`	顶部外边距为16px。
`.ion-margin-start`	`margin-start: 16px`	起始边外边距为16px。
`.ion-margin-end`	`margin-end: 16px`	尾部外边距为16px。
`.ion-margin-bottom`	`margin-bottom: 16px`	底部外边距为16px。
`.ion-margin-vertical`	`margin: 16px 0`	上下外边距为16px，左右为0。
`.ion-margin-horizontal`	`margin: 0 16px`	左右外边距为16px，上下为0。
`.ion-no-margin`	`margin: 0`	四边外边距都为0。

请注意：以上两个表格的边距默认都是16px，这个是可以自己改的。在@ionic/angular/css/padding.css中就可以修改。

容器弹性布局

Class	Style Rule	Description
`.ion-justify-content-start`	`justify-content: flex-start`	Items are packed toward the start on the main axis.
`.ion-justify-content-end`	`justify-content: flex-end`	Items are packed toward the end on the main axis.
`.ion-justify-content-center`	`justify-content: center`	Items are centered along the main axis.
`.ion-justify-content-around`	`justify-content: space-around`	Items are evenly distributed on the main axis with equal space around them.
`.ion-justify-content-between`	`justify-content: space-between`	Items are evenly distributed on the main axis.
`.ion-justify-content-evenly`	`justify-content: space-evenly`	Items are distributed so that the spacing between any two items is equal.
`.ion-align-items-start`	`align-items: flex-start`	Items are packed toward the start on the cross axis.
`.ion-align-items-end`	`align-items: flex-end`	Items are packed toward the end on the cross axis.
`.ion-align-items-center`	`align-items: center`	Items are centered along the cross axis.
`.ion-align-items-baseline`	`align-items: baseline`	Items are aligned so that their baselines align.
`.ion-align-items-stretch`	`align-items: stretch`	Items are stretched to fill the container.
`.ion-nowrap`	`flex-wrap: nowrap`	Items will all be on one line.
`.ion-wrap`	`flex-wrap: wrap`	Items will wrap onto multiple lines, from top to bottom.
`.ion-wrap-reverse`	`flex-wrap: wrap-reverse`	Items will wrap onto multiple lines, from bottom to top.

这里确实不好解释，下面的代码拷贝过去一看就明白了：

<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 <br>
        # <br>
        # <br>
        #
      </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 <br>
        # <br>
        # <br>
        #
      </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 <br>
        # <br>
        # <br>
        #
      </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 <br>
        # <br>
        # <br>
        #
      </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 <br>
        # <br>
        # <br>
        #
      </div>
    </ion-col>
  </ion-row>
</ion-grid>

条目弹性布局

Class	Style Rule	Description
`.ion-align-self-start`	`align-self: flex-start`	Item is packed toward the start on the cross axis.
`.ion-align-self-end`	`align-self: flex-end`	Item is packed toward the end on the cross axis.
`.ion-align-self-center`	`align-self: center`	Item is centered along the cross axis.
`.ion-align-self-baseline`	`align-self: baseline`	Item is aligned so that its baseline aligns with other item baselines.
`.ion-align-self-stretch`	`align-self: stretch`	Item is stretched to fill the container.
`.ion-align-self-auto`	`align-self: auto`	Item is positioned according to the parent's `align-items` value.

这里也是，直接拷贝代码过去看：

<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 <br>
        # <br>
        # <br>
        #
      </div>
    </ion-col>
  </ion-row>
</ion-grid>

边框控制类

Class	Description
`.ion-no-border`	元素的边框会被隐藏（经常用于隐藏header和footer的边框）。

屏幕大小分水岭

Breakpoint Name	Width
`xs`	`0`
`sm`	`576px`
`md`	`768px`
`lg`	`992px`
`xl`	`1200px`

本作品采用知识共享署名-非商业性使用 4.0 国际许可协议进行许可