CSS Utilities: Classes for Text/Element Alignment or Modification

Ionic Framework provides a set of CSS utility classes that can be used on any element in order to modify the text, element placement or adjust the padding and margin.
If your app was not started using an available Ionic Framework starter, the stylesheets listed in the optional section of the global stylesheets will need to be included in order for these styles to work.
All of the text classes listed above have additional classes to modify the text based on the screen size. Instead of text- in each class, use text-{breakpoint}- to only use the class on specific screen sizes, where {breakpoint} is one of the breakpoint names listed in Ionic Breakpoints.
The table below shows the default behavior, where {modifier} is any of the following: left, right, start, end, center, justify, wrap, nowrap, uppercase, lowercase, or capitalize, as they are described above.
The float CSS property specifies that an element should be placed along the left or right side of its container, where text and inline elements will wrap around it. This way, the element is taken from the normal flow of the web page, though still remaining a part of the flow, contrary to absolute positioning.
All of the float classes listed above have additional classes to modify the float based on the screen size. Instead of float- in each class, use float-{breakpoint}- to only use the class on specific screen sizes, where {breakpoint} is one of the breakpoint names listed in Ionic Breakpoints.
The table below shows the default behavior, where {modifier} is any of the following: left, right, start, or end, as they are described above.
The display CSS property sets whether an element is treated as a block or inline box and the layout used for its children, such as flow layout, grid or flex. It can also be used to completely hide an element from the layout.
Ionic provides the following utility classes for display:
All of the display classes listed above have additional classes to modify the display based on the screen size. Instead of display- in each class, use display-{breakpoint}- to only use the class on specific screen sizes, where {breakpoint} is one of the breakpoint names listed in Ionic Breakpoints.
The table below shows the default behavior, where {modifier} is any of the following: none, inline, inline-block, block, flex, inline-flex, grid, inline-grid, table, table-cell, table-row, as they are described above.
The following classes are deprecated and will be removed in the next major release. Use the recommended .ion-display-* classes instead.
The padding class sets the padding area of an element. The padding area is the space between the content of the element and its border.
The default amount of padding to be applied is 16px and is set by the --ion-padding variable. Refer to the CSS Variables section for more information on how to change these values.
The margin area extends the border area with an empty area used to separate the element from its neighbors.
The default amount of margin to be applied is 16px and is set by the --ion-margin variable. Refer to the CSS Variables section for more information on how to change these values.
Flexbox properties are divided into two categories: container properties that control the layout of all flex items, and item properties that control individual flex items. Refer to Flex Item Properties for item-level alignment.
The align-items CSS property sets the align-self value on all direct children as a group. In flexbox, it controls the alignment of items on the cross axis. In grid layout, it controls the alignment of items on the block axis within their grid areas.
Ionic provides the following utility classes for align-items:
The align-content CSS property sets the distribution of space between and around content items along a flexbox's cross axis, or a grid or block-level element's block axis.
This property has no effect on single line flex containers (i.e., ones with flex-wrap: nowrap).
Ionic provides the following utility classes for align-content:
The justify-content CSS property defines how the browser distributes space between and around content items along the main axis of a flex container and the inline axis of grid and multi-column containers.
Ionic provides the following utility classes for justify-content:
The flex-direction CSS property sets how flex items are placed in the flex container defining the main axis and the direction (normal or reversed).
Ionic provides the following utility classes for flex-direction:
The flex-wrap CSS property sets whether flex items are forced onto one line or can wrap onto multiple lines. If wrapping is allowed, it sets the direction that lines are stacked.
Ionic provides the following utility classes for flex-wrap:
All of the flex container classes listed above have additional classes to modify the properties based on the screen size. Instead of the base class name, use {property}-{breakpoint}-{modifier} to only use the class on specific screen sizes, where {breakpoint} is one of the breakpoint names listed in Ionic Breakpoints.
The table below shows the default behavior, where {property} is one of the following: justify-content, align-content, align-items, flex, or flex-wrap, and {modifier} is the corresponding value as described above.
The following classes are deprecated and will be removed in the next major release. Use the recommended .ion-flex-* classes instead.
Flex item properties control how individual flex items behave within their flex container. See also: Flex Container Properties for container-level alignment.
The align-self CSS property overrides a grid or flex item's align-items value. In grid, it aligns the item inside the grid area. In flexbox, it aligns the item on the cross axis.
The property doesn't apply to block-level boxes, or to table cells. If a flexbox item's cross-axis margin is auto, then align-self is ignored.
Ionic provides the following utility classes for align-self:
The flex CSS property is a shorthand proper