Flex Shrink

Utilities for controlling how flex items shrink.

@include('_partials.class-table', [ 'rows' => [ [ '.flex-shrink', 'flex-shrink: 1;', "Allow a flex item to shrink if needed.", ], [ '.flex-shrink-0', 'flex-shrink: 0;', "Prevent a flex item from shrinking.", ], ] ])

Shrink

Use .flex-shrink to allow a flex item to shrink if needed:

@component('_partials.code-sample')

Longer content that cannot flex

Item that will shrink even if it causes the content to wrap

Longer content that cannot flex

@endcomponent

Don't shrink

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

@component('_partials.code-sample')

Item that can shrink if needed

Item that cannot shrink below its initial size

Item that can shrink if needed

@endcomponent

Responsive

To control how a flex item shrinks at a specific breakpoint, add a {screen}: prefix to any existing utility class. For example, use md:flex-shrink-0 to apply the flex-shrink-0 utility at only medium screen sizes and above.

For more information about Tailwind's responsive design features, check out the Responsive Design documentation.

@component('_partials.responsive-code-sample') @slot('none')