Flex
Set an item’s flexbox properties.
Utility Modules
Flex
Sets how a flex item will grow or shrink to fit the space available in its flex container.
Mixins and Functions
| Utility | Mixin | Example |
|---|---|---|
.flex-flex | u-flex(flex) | @include u-flex('fill') |
Utility Classes
| Module name | Are responsive modifiers turned on? | Active state modifiers | Gzip file size | Non-gzip file size |
|---|---|---|---|---|
| flex | False | None | 0.06 KB | 0.33 KB |
The flex utility classes have not been modified from the U.S. Web Design System (USWDS). Refer to the USWDS Flex utility page for a complete listing of classes.
Flex direction
Sets how flex items are placed in the flex container defining the main axis and the direction.
Mixins and Functions
| Utility | Mixin | Example |
|---|---|---|
.flex-direction | u-flex(direction) | @include u-flex('row')@include u-flex('column') |
Utility Classes
| Module name | Are responsive modifiers turned on? | Active state modifiers | Gzip file size | Non-gzip file size |
|---|---|---|---|---|
| flex-direction | False | None | 0.02 KB | 0.1 KB |
The flex direction utility classes have not been modified from the U.S. Web Design System (USWDS). Refer to the USWDS Flex utility page for a complete listing of classes.
Flex wrap
Sets whether flex items are forced onto one line or can wrap onto multiple lines.
Mixins and Functions
| Utility | Mixin | Example |
|---|---|---|
.flex-wrap | u-flex(wrap) | @include u-flex('wrap')@include u-flex('no-wrap') |
Utility Classes
| Module name | Are responsive modifiers turned on? | Active state modifiers | Gzip file size | Non-gzip file size |
|---|---|---|---|---|
| flex-wrap | False | None | 0.02 KB | 0.1 KB |
The flex wrap utility classes have not been modified from the U.S. Web Design System (USWDS). Refer to the USWDS Flex utility page for a complete listing of classes.
Flex align
Controls the alignment of flex items on the cross axis.
Mixins and Functions
| Utility | Mixin | Example |
|---|---|---|
.flex-align-value | u-flex('align-value') | @include u-flex('align-center') |
Utility Classes
| Module name | Are responsive modifiers turned on? | Active state modifiers | Gzip file size | Non-gzip file size |
|---|---|---|---|---|
| align-items | False | None | 0.04 KB | 0.24 KB |
The flex align utility classes have not been modified from the U.S. Web Design System (USWDS). Refer to the USWDS Flex utility page for a complete listing of classes.
Flex align self
Mixins and Functions
| Utility | Mixin | Example |
|---|---|---|
.flex-align-self-value | u-flex('align-self-value') | @include u-flex('align-self-center') |
Utility Classes
| Module name | Are responsive modifiers turned on? | Active state modifiers | Gzip file size | Non-gzip file size |
|---|---|---|---|---|
| align-self | False | None | 0.06 KB | 0.31 KB |
The flex align self utility classes have not been modified from the U.S. Web Design System (USWDS). Refer to the USWDS Flex utility page for a complete listing of classes.
Flex justify
Defines how the browser distributes the space between and around content items along the main axis of a flex container.
Mixins and Functions
| Utility | Mixin | Example |
|---|---|---|
.flex-justify-option | u-flex(justify-option) | @include u-flex('justify')@include u-flex('justify-start')@include u-flex('justify-center')@include u-flex('justify-end') |
Utility Classes
| Module name | Are responsive modifiers turned on? | Active state modifiers | Gzip file size | Non-gzip file size |
|---|---|---|---|---|
| justify-content | False | None | 0.18 KB | 0.95 KB |
The flex justify utility classes have not been modified from the U.S. Web Design System (USWDS). Refer to the USWDS Flex utility page for a complete listing of classes.
Order
Sets the order to lay out an item in a flex container. Items in a container are sorted by ascending order value and then by their source order.
Mixins and Functions
| Utility | Mixin | Example |
|---|---|---|
.order-order | u-order(order) | @include u-order('last') |
Utility Classes
| Module name | Are responsive modifiers turned on? | Active state modifiers | Gzip file size | Non-gzip file size |
|---|---|---|---|---|
| order | True | None | 0.26 KB | 1.4 KB |
The order utility classes have not been modified from the U.S. Web Design System (USWDS). Refer to the USWDS Flex utility page for a complete listing of classes.