flex

Utilities for controlling how flex items both grow and shrink.

Examples

Basic example

Use flex-<number> utilities like flex-1 to allow a flex item to grow and shrink as needed, ignoring its initial size:

Initial

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

Auto

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

None

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

Using a custom value

Responsive design