Flex box

Utilities for controlling how flex items grow and shrink.

In this article

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

Usage

Initial

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

Flex 1

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

Auto

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

Grow

Use .flex-grow to allow a flex item to grow and fill available space.

Use .flex-grow-0 to prevent a flex item from growing.

Shrink

Use .flex-shrink to allow a flex item to shrink if required.

Use .flex-shrink-0 to prevent a flex item from shrinking.

None

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

Variants

By default, only responsive variants are generated for flex utilities.

Responsive

To control the flex direction of an element at a specific breakpoint, add a {screen}: prefix to any existing flex utility.

For example, use .md:flex-1 to apply the flex-1 utility at only medium screen sizes and above.

Hover-state

To include hover-state variants like .hover:flex-1, add "flexs" to the $hover-variants variable when recompiling your CSS:

$hover-variants: (
  // ...
  "flex",
);

Questions or feedback about this article? Let us know