Flexbox

Set an element's flexbox properties

Properties

Utility class	Description	Example
.flex-1	`flex: 1 0 0`
.flex-2	`flex: 2 0 0`
.flex-3	`flex: 3 0 0`
.flex-4	`flex: 4 0 0`
.flex-5	`flex: 5 0 0`
.flex-6	`flex: 6 0 0`
.flex-7	`flex: 7 0 0`
.flex-8	`flex: 8 0 0`
.flex-9	`flex: 9 0 0`
.flex-10	`flex: 10 0 0`
.flex-11	`flex: 11 0 0`
.flex-12	`flex: 12 0 0`
.flex-auto	`flex: 1 1 auto`
.flex-fill	`flex: 1 0 0`

Descriptions

The flex property is a shorthand for three individual CSS properties that control how a flex item sizes itself relative to its container.

Shorthand syntax

flex: <flex-grow> <flex-shrink> <flex-basis>

flex-grow: A number determining how much the item will expand to fill available space. Default: 0 (item will not grow). If all items are flex-grow: 1, they share extra space equally; an item with flex-grow: 2 gets twice as much extra space as one with 1.
flex-shrink: A number determining how much the item will contract when there is insufficient space. Default: 1 (items shrink proportionally). Setting this to 0 prevents the item from shrinking below its initial size.
flex-basis: Defines the initial main size of the item before growth or shrinkage. Can be an absolute value (e.g., 200px), a percentage (e.g., 20%), auto (size based on content or the element's width/height), or 0 which means start at zero and distribute space using flex-grow ratios.

Common flex property combinations

flex-auto: Equivalent to flex: 1 1 auto. The item will grow to fill available space but can also shrink when necessary. Its initial size is based on the content (auto basis), so it respects intrinsic size while participating in flexible distribution.
flex-fill: Makes the element fill available space (utility equivalent to flex: 1 0 0 in this system). The item will take available space according to flex-grow but will not shrink below its computed size because flex-shrink is 0. Using a 0 basis ensures even distribution when multiple fill items are present.

Utility classes

Utility classes may be included in your HTML or applied using Utility classes in your Sass.

Utility	Example	Code
.flex-value	.flex-fill	class=("flex-fill")

Use single-quoted strings in Utility classes.
Do not quote numbers or px values. With the exception of half (05), values like '105', and '205' should be treated as strings.
String tokens for half values (like 05) and negative values (like neg-1) may also be written with their unquoted number token equivalent: 0.5, 1.5, 2.5, -1, -1.5, etc.
If multiple utilities share the same prefix (ex: .text- or .flex-) or a single utility accepts multiple kinds of values (ex: .border accepts both border weight and border color), their shared mixin can accept multiple comma-separated values:
- u-text('primary-darkest', 'no-underline', 'bold')
- u-border-top(2px, 'accent-warm')
Output any utility mixin as !important by appending !important to the mixin’s argument list:

u-bg('red-warm-50v', !important)

Utility variants

More information about utility variants can be viewed on the utility variants page. Responsive and state variants are listed as true when they are available for use.

Responsive variants

You can apply different styles at differentresponsive breakpoints using responsive utilities. Use a breakpoint prefix separated with a : to target a utility at a responsive breakpoint and higher (eg. .desktop:border-05).

Utility variable	Responsive
$font-style-settings	false

State variants

You can apply different styles for different state variants using state utilities. Use a state prefix separated with a : to target a utility for a specific state. (eg. .hover:shadow-2).

Utility variable	Active	Focus	Hover	Visited
$font-style-settings	false	false	false	false