Open In App

Tailwind CSS Flex

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

The CSS flexbox is a vital feature to develop the frontend, there is four flex available in tailwind CSS all the properties are covered as in class form. It is the alternative of CSS flex Property for fast development of front-end. It is used to set the length of flexible items. The flex class is much responsive and mobile-friendly. It is easy to positioning child elements and the main container. The margin doesn’t collapse with the content margins. The order of any element can be easily changed without editing the HTML section.

Flex:

  • flex-1
  • flex-initial
  • flex-auto
  • flex-none

flex-1: A ratio that specifies, how much items will grow relative to the rest of the flexible items. It has been used to allow a flex item to grow and shrink as needed, ignoring its initial size.

Syntax:

 <element class="flex-1"> Contents... </element>

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>


Output:

flex-initial: This class defines how much that item will grow relative to the rest of the flexible items. It has been used to allow a flex item to shrink but not grow, taking into account its initial size

Syntax:

  <element class="flex-initial">..</element>

Example:

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>Tailwind flex-initial 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-initial 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>


Output:

flex-auto: This class specifies, how much that item will grow relative to the content of the flexible items. It has been used to allow a flex item to grow and shrink as needed, ignoring its initial size.

Syntax:

  <element class="flex-auto"> Contents... </element>

Example:

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>Tailwind flex-auto 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-auto 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>


Output:

flex-none: This class set the restriction to growing or shrinking the element if extra space available or not. This is to prevent a flex item from growing or shrinking, it only takes the space according to the size of the content

Syntax:

  <element class="flex-none">..</element>

Example:

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>Tailwind flex-none 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-none 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>


Output:



Last Updated : 07 Feb, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads