[TOC] Ionic提供了一组实用程序属性，可以在任何元素上使用，以便修改文本，元素放置或调整填充和边距。 ## 文字修改 ### 文字对齐 ~~~ <ion-grid> <ion-row> <ion-col> <div text-start> <h3>text-start</h3> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem. </div> </ion-col> <ion-col> <div text-end> <h3>text-end</h3> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem. </div> </ion-col> <ion-col> <div text-center> <h3>text-center</h3> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem. </div> </ion-col> </ion-row> <ion-row> <ion-col> <div text-justify> <h3>text-justify</h3> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem. </div> </ion-col> <ion-col> <div text-wrap> <h3>text-wrap</h3> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem. </div> </ion-col> <ion-col> <div text-nowrap> <h3>text-nowrap</h3> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div> </ion-col> </ion-row> </ion-grid> ~~~ | 属性 | 风格规则 | 描述 | | --- | --- | --- | | `text-left` | `text-align: left` | 内联内容与行框的左边缘对齐。 | | `text-right` | `text-align: right` | 内联内容与行框的右边缘对齐。 | | `text-start` | `text-align: start` | 一样`text-left`如果方向是左到右和`text-right`如果方向是从右到左。 | | `text-end` | `text-align: end` | 一样`text-right`如果方向是左到右和`text-left`如果方向是从右到左。 | | `text-center` | `text-align: center` | 内联内容在行框中居中。 | | `text-justify` | `text-align: justify` | 内联内容是合理的。文本应该间隔开，以使其左右边缘与行框的左右边缘对齐，但最后一行除外。 | | `text-wrap` | `white-space: normal` | 空白的序列被折叠。源中的换行符作为其他空格处理。根据需要打破行以填充行框。 | | `text-nowrap` | `white-space: nowrap` | 折叠空白`normal`，但抑制文本中的换行符（文本换行）。 | ### 文字转换 ~~~ <ion-grid> <ion-row> <ion-col> <div text-uppercase> <h3>text-uppercase</h3> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem. </div> </ion-col> <ion-col> <div text-lowercase> <h3>text-lowercase</h3> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem. </div> </ion-col> <ion-col> <div text-capitalize> <h3>text-capitalize</h3> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem. </div> </ion-col> </ion-row> </ion-grid> ~~~ | 属性 | 风格规则 | 描述 | | --- | --- | --- | | `text-uppercase` | `text-transform: uppercase` | 强制将所有字符转换为大写。 | | `text-lowercase` | `text-transform: lowercase` | 强制将所有字符转换为小写。 | | `text-capitalize` | `text-transform: capitalize` | 强制将每个单词的第一个字母转换为大写。 | ### 响应文本属性 上面列出的所有文本属性都具有其他属性，可根据屏幕大小修改文本。而不是`text-`在每个属性中，使用`text-{breakpoint}-`仅在特定屏幕大小上使用属性，其中`{breakpoint}`是`--screen-breakpoints`变量中定义的断点之一。 下表显示的默认行为，其中`{modifier}`是下列任何一种：`left`，`right`，`start`，`end`，`center`，`justify`，`wrap`，`nowrap`，`uppercase`，`lowercase`，或`capitalize`，因为它们在上文描述。 | 属性 | 描述 | | --- | --- | | `text-{modifier}` | 将修改器应用于所有屏幕尺寸的元素。 | | `text-sm-{modifier}` | 在何时将修改器应用于元素`min-width: 576px`。 | | `text-md-{modifier}` | 在何时将修改器应用于元素`min-width: 768px`。 | | `text-lg-{modifier}` | 在何时将修改器应用于元素`min-width: 992px`。 | | `text-xl-{modifier}` | 在何时将修改器应用于元素`min-width: 1200px`。 | ## 元素放置 ### 浮动元素 浮点CSS属性指定元素应沿其容器的左侧或右侧放置，其中文本和内联元素将环绕它。这样，元素取自网页的正常流程，但仍然是流程的一部分，与绝对定位相反。 ~~~ <ion-grid> <ion-row> <ion-col float-left> <div> <h3>float-left</h3> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem. </div> </ion-col> <ion-col float-right> <div> <h3>float-right</h3> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem. </div> </ion-col> </ion-row> </ion-grid> ~~~ | 属性 | 风格规则 | 描述 | | --- | --- | --- | | `float-left` | `float: left` | 该元素将浮动在其包含块的左侧。 | | `float-right` | `float: right` | 元素将浮动在其包含块的右侧。 | | `float-start` | `float: left`/`float: right` | 一样`float-left`如果方向是左到右和`float-right`如果方向是从右到左。 | | `float-end` | `float: left`/`float: right` | 一样`float-right`如果方向是左到右和`float-left`如果方向是从右到左。 | ### 响应浮动属性 上面列出的所有浮动属性都有其他属性可以根据屏幕大小修改浮动。而不是`float-`在每个属性中，使用`float-{breakpoint}-`仅在特定屏幕大小上使用属性，其中`{breakpoint}`是`--screen-breakpoints`变量中定义的断点之一。下表显示的默认行为，其中`{modifier}`是下列任何一项：`left`，`right`，`start`，或`end`，因为它们在上文描述。 | 属性 | 描述 | | --- | --- | | `float-{modifier}` | 将修改器应用于所有屏幕尺寸的元素。 | | `float-sm-{modifier}` | 在何时将修改器应用于元素`min-width: 576px`。 | | `float-md-{modifier}` | 在何时将修改器应用于元素`min-width: 768px`。 | | `float-lg-{modifier}` | 在何时将修改器应用于元素`min-width: 992px`。 | | `float-xl-{modifier}` | 在何时将修改器应用于元素`min-width: 1200px`。 | ## 内容空间 ### 元素填充 padding属性设置元素的填充区域。填充区域是元素内容与其边界之间的空间。 `padding`要应用的默认数量`16px`是并由`--ion-padding`变量设置。见[CSS变量](https://ionicframework.com/docs/theming/css-variables)有关如何更改这些值的更多信息，请参阅 ~~~ <ion-grid> <ion-row> <ion-col padding> <div> padding padding </div> </ion-col> <ion-col padding-top> <div> padding-top padding-top </div> </ion-col> <ion-col padding-start> <div> padding-start padding-start </div> </ion-col> <ion-col padding-end> <div> padding-end padding-end </div> </ion-col> </ion-row> <ion-row> <ion-col padding-bottom> <div> padding-bottom padding-bottom </div> </ion-col> <ion-col padding-vertical> <div> padding-vertical padding-vertical </div> </ion-col> <ion-col padding-horizontal> <div> padding-horizontal padding-horizontal </div> </ion-col> <ion-col no-padding> <div> no-padding no-padding </div> </ion-col> </ion-row> </ion-grid> ~~~ | 属性 | 风格规则 | 描述 | | --- | --- | --- | | `padding` | `padding: 16px` | 适用于所有方面的填充。 | | `padding-top` | `padding-top: 16px` | 将填充应用于顶部。 | | `padding-start` | `padding-start: 16px` | 应用填充到开头。 | | `padding-end` | `padding-end: 16px` | 将填充应用到最后。 | | `padding-bottom` | `padding-bottom: 16px` | 将填充应用于底部。 | | `padding-vertical` | `padding: 16px 0` | 在顶部和底部应用填充。 | | `padding-horizontal` | `padding: 0 16px` | 在左侧和右侧应用填充。 | | `no-padding` | `padding: 0` | 不向所有方面应用填充。 | ### 元素边界 边缘区域扩展边界区域，其中空区域用于将元素与其邻居分开。 `margin`要应用的默认数量`16px`是并由`--ion-margin`变量设置。见[CSS变量](https://ionicframework.com/docs/theming/css-variables)有关如何更改这些值的更多信息，请参阅 ~~~ <ion-grid> <ion-row> <ion-col margin> <div> margin margin </div> </ion-col> <ion-col margin-top> <div> margin-top margin-top </div> </ion-col> <ion-col margin-start> <div> margin-start margin-start </div> </ion-col> <ion-col margin-end> <div> margin-end margin-end </div> </ion-col> </ion-row> <ion-row> <ion-col margin-bottom> <div> margin-bottom margin-bottom </div> </ion-col> <ion-col margin-vertical> <div> margin-vertical margin-vertical </div> </ion-col> <ion-col margin-horizontal> <div> margin-horizontal margin-horizontal </div> </ion-col> <ion-col no-margin> <div> no-margin no-margin </div> </ion-col> </ion-row> </ion-grid> ~~~ | 属性 | 风格规则 | 描述 | | --- | --- | --- | | `margin` | `margin: 16px` | 适用于所有方面的保证金。 | | `margin-top` | `margin-top: 16px` | 将保证金应用于顶部。 | | `margin-start` | `margin-start: 16px` | 在左侧应用保证金。 | | `margin-end` | `margin-end: 16px` | 向右应用保证金。 | | `margin-bottom` | `margin-bottom: 16px` | 将保证金应用于底部。 | | `margin-vertical` | `margin: 16px 0` | 在顶部和底部应用边距。 | | `margin-horizontal` | `margin: 0 16px` | 向左和向右应用边距。 | | `no-margin` | `margin: 0` | 不向所有方面申请保证金。 | ## Flex属性  ### Flex容器属性 ~~~ <ion-grid> <ion-row justify-content-start> <ion-col size="3"> <div> 1 of 2 1 of 2 </div> </ion-col> <ion-col size="3"> <div> 2 of 2 2 of 2 </div> </ion-col> </ion-row> <ion-row justify-content-center> <ion-col size="3"> <div> 1 of 2 1 of 2 </div> </ion-col> <ion-col size="3"> <div> 2 of 2 2 of 2 </div> </ion-col> </ion-row> <ion-row justify-content-end> <ion-col size="3"> <div> 1 of 2 1 of 2 </div> </ion-col> <ion-col size="3"> <div> 2 of 2 2 of 2 </div> </ion-col> </ion-row> <ion-row justify-content-around> <ion-col size="3"> <div> 1 of 2 1 of 2 </div> </ion-col> <ion-col size="3"> <div> 2 of 2 2 of 2 </div> </ion-col> </ion-row> <ion-row justify-content-between> <ion-col size="3"> <div> 1 of 2 1 of 2 </div> </ion-col> <ion-col size="3"> <div> 2 of 2 2 of 2 </div> </ion-col> </ion-row> <ion-row justify-content-evenly> <ion-col size="3"> <div> 1 of 2 1 of 2 </div> </ion-col> <ion-col size="3"> <div> 2 of 2 2 of 2 </div> </ion-col> </ion-row> </ion-grid> <ion-grid> <ion-row align-items-start> <ion-col> <div> 1 of 4 1 of 4 </div> </ion-col> <ion-col> <div> 2 of 4 2 of 4 </div> </ion-col> <ion-col> <div> 3 of 4 3 of 4 </div> </ion-col> <ion-col> <div> 4 of 4 <br> # <br> # <br> # # </div> </ion-col> </ion-row> <ion-row align-items-end> <ion-col> <div> 1 of 4 1 of 4 </div> </ion-col> <ion-col> <div> 2 of 4 2 of 4 </div> </ion-col> <ion-col> <div> 3 of 4 3 of 4 </div> </ion-col> <ion-col> <div> 4 of 4 <br> # <br> # <br> # # </div> </ion-col> </ion-row> <ion-row align-items-center> <ion-col> <div> 1 of 4 1 of 4 </div> </ion-col> <ion-col> <div> 2 of 4 2 of 4 </div> </ion-col> <ion-col> <div> 3 of 4 3 of 4 </div> </ion-col> <ion-col> <div> 4 of 4 <br> # <br> # <br> # # </div> </ion-col> </ion-row> <ion-row align-items-baseline> <ion-col> <div> 1 of 4 1 of 4 </div> </ion-col> <ion-col> <div> 2 of 4 2 of 4 </div> </ion-col> <ion-col> <div> 3 of 4 3 of 4 </div> </ion-col> <ion-col> <div> 4 of 4 <br> # <br> # <br> # # </div> </ion-col> </ion-row> <ion-row align-items-stretch> <ion-col> <div> 1 of 4 1 of 4 </div> </ion-col> <ion-col> <div> 2 of 4 2 of 4 </div> </ion-col> <ion-col> <div> 3 of 4 3 of 4 </div> </ion-col> <ion-col> <div> 4 of 4 <br> # <br> # <br> # # </div> </ion-col> </ion-row> </ion-grid> ~~~ | 属性 | 风格规则 | 描述 | | --- | --- | --- | | `justify-content-start` | `justify-content: flex-start` | 项目在主轴的起点处打包。 | | `justify-content-end` | `justify-content: flex-end` | 物品在主轴的末端包装。 | | `justify-content-center` | `justify-content: center` | 项目沿主轴居中。 | | `justify-content-around` | `justify-content: space-around` | 物品均匀分布在主轴上，周围空间相等。 | | `justify-content-between` | `justify-content: space-between` | 项目均匀分布在主轴上。 | | `justify-content-evenly` | `justify-content: space-evenly` | 分配项目以使任何两个项目之间的间距相等。 | | `align-items-start` | `align-items: flex-start` | 项目在横轴上从头开始打包。 | | `align-items-end` | `align-items: flex-end` | 物品在十字轴上朝末端包装。 | | `align-items-center` | `align-items: center` | 项目沿横轴居中。 | | `align-items-baseline` | `align-items: baseline` | 对齐项目以使其基线对齐。 | | `align-items-stretch` | `align-items: stretch` | 拉伸物品以填充容器。 | | `nowrap` | `flex-wrap: nowrap` | 物品将全部在一条线上。 | | `wrap` | `flex-wrap: wrap` | 物品将从上到下包裹在多条线上。 | | `wrap-reverse` | `flex-wrap: wrap-reverse` | 物品将从底部到顶部包裹在多条线上。 | ### Flex项目属性 ~~~ <ion-grid> <ion-row> <ion-col align-self-start> <div> 1 of 4 1 of 4 </div> </ion-col> <ion-col align-self-center> <div> 2 of 4 2 of 4 </div> </ion-col> <ion-col align-self-end> <div> 3 of 4 3 of 4 </div> </ion-col> <ion-col> <div> 4 of 4 <br> # <br> # <br> # # </div> </ion-col> </ion-row> </ion-grid> ~~~ | 属性 | 风格规则 | 描述 | | --- | --- | --- | | `align-self-start` | `align-self: flex-start` | 项目在横轴上从头开始打包。 | | `align-self-end` | `align-self: flex-end` | 物品在横轴上朝向末端包装。 | | `align-self-center` | `align-self: center` | 项目沿横轴居中。 | | `align-self-baseline` | `align-self: baseline` | 对齐项目，使其基线与其他项目基线对齐。 | | `align-self-stretch` | `align-self: stretch` | 拉伸物品以填充容器。 | | `align-self-auto` | `align-self: auto` | 项目根据父母的`align-items`价值定位。 |