Display flex

Tailwind CSS Display flex

Use responsive display flex utilities with TW elements. A simple and quick way to create a flexible element.

Basic example

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

I'm a flexbox container!

HTML

        
            
        <div class="... flex">I'm a flexbox container!</div>

Use .inline-flex to create an inline flex container that flows with text.

In the realm of endless wonder, where dreams take flight on wings of possibility, a symphony of colors paints the sky, igniting the soul with pure joy. I'm an inline flexbox container! Nature's embrace whispers tales of resilience, inviting us to explore the uncharted paths that lead to extraordinary discoveries.

HTML

        
            
        <p>
          ...
          <span class="... inline-flex items-baseline">
            <span>I'm an inline flexbox container!</span>
          </span>
          ...
        </p>

Display flex

Tailwind CSS Display flex

Basic example

Related resources