Flex Display

Class reference

Flex

Use .flex to create a block-level flex container:

<div class="flex bg-grey-lighter">
  <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
  <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">2</div>
  <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
</div>

Inline flex

Use .inline-flex to create an inline flex container:

<div class="inline-flex bg-grey-lighter">
  <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
  <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">2</div>
  <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
</div>

Responsive

To control the display property of an element at a specific breakpoint, add a {screen}: prefix to any existing display utility class. For example, use md:inline-flex to apply the inline-flex utility at only medium screen sizes and above.

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

Customizing

Responsive and State Variants

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

You can control which variants are generated for the flex display 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:

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

Disabling

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

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