block - for block elements in-block - for inline-block elements in-line - for inline elements grid - for grid elements in-grid - for inline-grid elements flex - for flex boxes in-flex - for inline-flex boxes table - for table elements in-table - for inline-table elements grid and flex utility classes are special classes which can be combined with their
modifier attributes that determines how a content is displayed. For this reason, they are both discussed below:
"grid". The grid items are not entirely handled
by the local css library. However, it provides utility class "grid-center" for aligning items
to the center. This may prove useful in situations where items are needed to be centralized.
<div class="px-140 grid-center bc-silver">
Hello in center
</div>
"flex" is considered as a flex item while "in-flex" is used to
specify an inline-flex item. Flex is mostly used in form alignments.
Flex items are greatly controlled by combining the name with other utility classes. Classes that can be combined with the flex
or in-flex are mostly used for flex alignments. Some of the classes and their features are listed below: flex-l - shifts a flex child item to the leftflex-lt - shifts a flex child item to the left topflex-lb - shifts a flex child item to the left bottomflex-r - shifts a flex child item to the rightflex-rt - shifts a flex child item to the right topflex-rb - shifts a flex child item to the right bottomflex-col / f-col - sets flex direction to columnflex-row / f-row - set flex direction to rowflex-col-m - sets flex direction to row on smaller screen sizeflex-row-m - sets flex direction to column on smaller screen size mid - centralizes the position of child items to the middle (vertically and horizontally) of the parent flex item midl - centralizes the position of child items vertically to the middle left of the parent flex item midr - centralizes the position of child items vertically to the middle right of the parent flex item midv - centralizes the position of child items vertically midh - centralizes the position of child items horizontally just-left - justifies flex items to start just-right - justifies flex items to end just-center - justifies flex contents to center flex-start - justifies flex contents to flex-start flex-end - justifies flex contents to flex-end flex-center - justifies and aligns flex contents to center space-between - justifies contents using space-between space-around - justifies contents using space-around space-even - justifies contents using space-evenly flex-full is applied specially for items with flex property, in-flex-full is applied for items with inline-flex display property.
The images below reveals the effect of flex boxes when other utility classes are applied with it.