Tailwind CSS v1.0 is here! Learn more →

Flex, Grow, & Shrink

Utilities for controlling how flex items grow and shrink.

Class reference

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

Initial Default

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 
<div class="flex bg-grey-lighter">
  <div class="flex-initial text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
    Short
  </div>
  <div class="flex-initial text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
    Medium length
  </div>
</div>

<div class="flex bg-grey-lighter">
  <div class="flex-initial text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
    Short
  </div>
  <div class="flex-initial text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
    Medium length
  </div>
  <div class="flex-initial text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui ad labore ipsam, aut rem quo repellat esse tempore id, quidem
  </div>
</div>

Flex 1

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

Default behavior

Short
Medium length
Significantly larger amount of content

With .flex-1

Short
Medium length
Significantly larger amount of content 
<div class="flex bg-grey-lighter">
  <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
    Short
  </div>
  <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
    Medium length
  </div>
  <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
    Significantly larger amount of content
  </div>
</div>

Auto

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

Default behavior

Short
Medium length
Significantly larger amount of content

With .flex-auto

Short
Medium length
Significantly larger amount of content 
<div class="flex bg-grey-lighter">
  <div class="flex-auto text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
    Short
  </div>
  <div class="flex-auto text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
    Medium length
  </div>
  <div class="flex-auto text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
    Significantly larger amount of content
  </div>
</div>

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 
<div class="flex bg-grey-lighter">
  <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
    Item that can grow or shrink if needed
  </div>
  <div class="flex-none text-grey-darkest text-center bg-grey px-4 py-2 m-2">
    Item that cannot grow or shrink
  </div>
  <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
    Item that can grow or shrink if needed
  </div>
</div>

Grow

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

Content that cannot flex
Item that will grow
Content that cannot flex 
<div class="flex bg-grey-lighter">
  <div class="flex-none text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
    Content that cannot flex
  </div>
  <div class="flex-grow text-grey-darkest text-center bg-grey px-4 py-2 m-2">
    Item that will grow
  </div>
  <div class="flex-none text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
    Content that cannot flex
  </div>
</div>

Don't grow

Use .flex-no-grow to prevent a flex item from growing:

Will grow
Will not grow
Will grow 
<div class="flex bg-grey-lighter">
  <div class="flex-grow text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
    Will grow
  </div>
  <div class="flex-no-grow text-grey-darkest text-center bg-grey px-4 py-2 m-2">
    Will not grow
  </div>
  <div class="flex-grow text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
    Will grow
  </div>
</div>

Shrink

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

Longer content that cannot flex
Item that will shrink even if it causes the content to wrap
Longer content that cannot flex 
<div class="flex bg-grey-lighter">
  <div class="flex-none text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
    Longer content that cannot flex
  </div>
  <div class="flex-shrink text-grey-darkest text-center bg-grey px-4 py-2 m-2">
    Item that will shrink even if it causes the content to wrap
  </div>
  <div class="flex-none text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
    Longer content that cannot flex
  </div>
</div>

Don't shrink

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

Item that can shrink if needed
Item that cannot shrink below its initial size
Item that can shrink if needed 
<div class="flex bg-grey-lighter">
  <div class="flex-shrink text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
    Item that can shrink if needed
  </div>
  <div class="flex-no-shrink text-grey-darkest text-center bg-grey px-4 py-2 m-2">
    Item that cannot shrink below its initial size
  </div>
  <div class="flex-shrink text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
    Item that can shrink if needed
  </div>
</div>

Responsive

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

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

Item that can grow or shrink if needed
Responsive flex item
Item that can grow or shrink if needed
Item that can grow or shrink if needed
Responsive flex item
Item that can grow or shrink if needed
Item that can grow or shrink if needed
Responsive flex item
Item that can grow or shrink if needed
Item that can grow or shrink if needed
Responsive flex item
Item that can grow or shrink if needed
Item that can grow or shrink if needed
Responsive flex item
Item that can grow or shrink if needed

Customizing

Responsive and State Variants

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

You can control which variants are generated for the flex, grow, and shrink utilities by modifying the flexbox property in the modules section of your Tailwind config file.

For example, this config will also generate hover and focus variants:

{
// ...
modules: {
    // ...
-   flexbox: ['responsive'],
+   flexbox: ['responsive', 'hover', 'focus', 'active', 'group-hover'],
}
}

Note that modifying the flexbox property will affect which variants are generated for all Flexbox utilities, not just the flex, grow, and shrink utilities.

Disabling

If you don't plan to use the flex, grow, and shrink utilities in your project, you can disable them entirely by setting the flexbox property to false in the modules section of your config file:

{
// ...
modules: {
    // ...
-   flexbox: ['responsive'],
+   flexbox: false,
}
}

Note that modifying the flexbox property will affect which variants are generated for all Flexbox utilities, not just the flex, grow, and shrink utilities.