How to use Flexbox Utilities in Tailwind CSS ?
Last Updated :
05 Feb, 2024
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.
Share your thoughts in the comments
Please Login to comment...