Flexbox
Utility classes for flexbox.
Flex container
Utilities for flex containers.
| Class | Description |
|---|---|
.display-flex | A block-level flexbox container. |
.display-inlineFlex | An inline flexbox container. |
.fd-row | Default. The flexible items are displayed horizontally, as a row. |
.fd-rowReverse | Same as row, but in reverse order. |
.fd-column | The flexible items are displayed vertically, as a column. |
.fd-columnReverse | Same as column, but in reverse order |
.fw-nowrap | Default. Specifies that the flexible items will not wrap. |
.fw-wrap | Specifies that the flexible items will wrap if necessary. |
.fw-wrapReverse | Specifies that the flexible items will wrap, if necessary, in reverse order. |
.ai-flexStart | Default. Items are stretched to fit the container. |
.ai-flexStart | Items are positioned at the beginning of the container. |
.ai-flexEnd | Items are positioned at the end of the container. |
.ai-center | Items are positioned at the center of the container. |
.ai-baseline | Items are positioned at the baseline of the container. |
.jc-flexStart | Default. Items are positioned at the beginning of the container. |
.jc-flexEnd | Items are positioned at the end of the container. |
.jc-center | Items are positioned at the center of the container. |
.jc-spaceBetween | Items are positioned with space between the lines. |
.jc-spaceAround | Distribute items evenly. Items have equal space around them. |
.jc-spaceEvenly | Apply the 5th value in the leading scale |
.ac-flexStart | Lines are packed toward the start of the flex container. |
.ac-flexEnd | Lines are packed toward the end of the flex container. |
.ac-center | Lines are packed toward the center of the flex container. |
.ac-spaceBetween | Lines are evenly distributed in the flex container. |
.ac-spaceAround | Lines are evenly distributed in the flex container, with half-size spaces on either end. |
.ac-stretch | Default. Lines stretch to take up the remaining space. |
Flex item
Utilities for flex items.
| Class | Description |
|---|---|
.as-flexStart | The flex item is positioned at the beginning of the container. |
.as-flexEnd | The flex item is positioned at the end of the container. |
.as-center | The flex item is positioned at the center of the container. |
.as-baseline | The flex item is positioned at the baseline of the container. |
.as-stretch | The flex item is positioned to fit the container. |
.fg-0 | Prevent a flex item from growing. |
.fg-1 | Allow a flex item to grow to fill any available space. |
.fs-0 | Prevent a flex item from shrinking. |
.fs-1 | Allow a flex item to shrink if necessary. |
.fb-0 | Set flex-basis to 0. |
.fb-auto | Default. The length of the flex item is according to its content. |
.flex-auto | Allow a flex item to grow and shrink, according to its initial size. Same as 1 1 auto. |
.flex-initial | Allow a flex item to shrink but not grow, according to its initial size. Same as 0 1 auto. |
.flex-none | Prevent a flex item from both growing and shrinking. Same as 0 0 auto. |
.flex-1 | Allow a flex item to grow and shrink, ignoring its initial size. |