Tailwind CSS Flex

23 Mar, 2022
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 Langauge            </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 Langauge            </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 Langauge            </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 Langauge            </div>         </div>    </div> </body>   </html>
Output:
Tailwind CSS
Tailwind-Flexbox
CSS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to update Node.js and NPM to next version ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to create footer to stay at the bottom of a Web page?
CSS to put icon inside an input element in a form
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?