How to use Flexbox Utilities in Tailwind CSS ?

To use Flexbox utilities in Tailwind CSS, apply classes that control the layout and alignment of flex container and flex items. Common classes include flex, flex-row, flex-col, justify-between, items-center, and more.

Syntax

<div class="flex flex-row justify-between items-center">
      <div class="flex-shrink-0">Logo</div>
      <div class="flex-grow">Navigation</div>
</div>

Classes

Class	Description
flex	Establishes a flex container, enabling a flexible box layout for its child elements.
flex-row	Sets the flex container to a row direction, arranging child elements horizontally along the main axis.
flex-col	Sets the flex container to a column direction, arranging child elements vertically along the main axis.
justify-between	Aligns items along the main axis with space distributed between them, achieving equal spacing between child elements.
items-center	Aligns items along the cross axis at the centre, ensuring vertical alignment of child elements in the flex container.
flex-shrink-0	Prevents an element from shrinking beyond its initial size when there is limited space in the flex container.
flex-grow	Allows an element to grow and fill available space along the main axis within the flex container.

Key Features

• Tailwind’s Flexbox utilities provide a flexible and efficient way to create various layouts and alignments.
• Flexbox classes can be used with responsive variants (sm:, md:, lg:, xl:) for adapting layouts based on screen sizes.
• Classes like justify-between and items-center provide control over alignment along both the main and cross axes.
• Use order class to control the visual order of flex items.