Flex

Utilities for controlling how flex items both grow and shrink.

Class	Properties
.flex-initial	flex: 0 1 auto;
.flex-1	flex: 1 1 0%;
.flex-auto	flex: 1 1 auto;
.flex-none	flex: none;

Initial

Use .flex-initial to allow a flex item to shrink but not grow, taking into account its initial size.

Items don't grow when there's extra space

Short

Medium length

Items shrink if possible when needed

Short

Medium length

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui ad labore ipsam, aut rem quo repellat esse tempore id, quidem

Flex 1

Use .flex-1 to allow a flex item to grow and shrink as needed, ignoring its initial size.

Default behaviour

Short

Medium length

Significantly larger amount of content

With .flex-1

Short

Medium length

Significantly larger amount of content

Auto

Use .flex-auto to allow a flex item to grow and shrink, taking into account its initial size.

Default behaviour

Short

Medium length

Significantly larger amount of content

With .flex-auto

Short

Medium length

Significantly larger amount of content

None

Use .flex-none to prevent a flex item from growing or shrinking.

Item that can grow or shrink if needed

Item that cannot grow or shrink

Item that can grow or shrink if needed

Responsive

To control how a flex item both grows and shrinks at a specific breakpoint, add @{breakpoint} add the end of the utility class.

Item that can grow or shrink if needed

Responsive flex item

Item that can grow or shrink if needed

Variants

By default, only responsive variants are generated for this utility. You can control which variants are generated by modifying the $utility-configuration in _settings.scss.