Tailwind CSS Flexbox Complete Reference

Last Updated : 03 Aug, 2023

Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the buildings blocks that you need. The CSS flexbox is a vital feature to develop the frontend, there are four directions available in CSS so in Tailwind CSS all the properties are covered as in class form. we had alternative Tailwind CSS Flex classes for fast development of front-end like Tailwind CSS Flex Direction, Flex wrap, Flex, etc..

Tailwind CSS Class	Description	Example
Flex Direction	It established the main axis of the flexible item.	Try
Flex Wrap	It specifies whether flex items are forced into a single line or wrapped onto multiple lines.	Try
Flex	It is used to set the length of flexible items.	Try
Flex Grow	This class specifies how much the item will grow compared to other items inside that container.	Try
Flex Shrink	This class specifies how much the item will shrink compared to other items inside that container.	Try
Order	It renders flex and grid items in a different order than they appear in the DOM.	Try

Below example will give you a brief idea about the Flexbox of Tailwind CSS:

Example:

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Tailwind flex-1 Class</title> 
  
    <link href= 
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
        rel="stylesheet"> 
</head> 
  
<body> 
    <h1 class="text-center text-green-600 text-5xl font-bold"> 
        GeeksforGeeks 
    </h1> 
  
    <p class="text-center font-bold">Tailwind CSS flex-1 Class</p> 
  
  
    <div id="main" class="bg-green-200 border-4 
                        border-green-600 w-2/3 ml-32"> 
        <p class="ml-2">This is the effect of flex-1:</p> 
  
  
        <div class="flex m-2 text-white"> 
            <div class="bg-green-900 flex-1"> 
                Geeksforgeeks 
            </div> 
            <div class="bg-green-800 flex-1"> 
                Tailwind CSS 
            </div> 
        </div> 
        <p class="ml-2"> 
                This is the effect of flex-initial: 
        </p> 
  
  
        <div class="flex m-2 text-white"> 
            <div class="bg-green-900 flex-initial"> 
                Geeksforgeeks 
            </div> 
            <div class="bg-green-800 flex-initial"> 
                A Computer Science for Geeks 
            </div> 
        </div> 
        <p class="ml-2"> 
            This is the effect of flex-auto: 
        </p> 
  
  
        <div class="flex m-2 text-white"> 
            <div class="bg-green-900 flex-auto"> 
                CSS 
            </div> 
            <div class="bg-green-800 flex-auto"> 
                Cascading Style Sheet 
            </div> 
        </div> 
        <p class="ml-2"> 
                This is the effect of flex-none: 
        </p> 
  
  
        <div class="flex m-2 text-white"> 
            <div class="bg-green-900 flex-none"> 
                HTML 
            </div> 
            <div class="bg-green-800 flex-none"> 
                Hypertext Markup Language 
            </div> 
        </div> 
    </div> 
</body> 
  
</html> 