Press "Enter" to skip to content

Flex Examples in CSS

Last updated on October 5, 2019

Definition :

  • Flex is a feature or property which is meant for creating flexible component.

Program 1 :

<html>

     <head>

                     <style type=”text/css”>

                                    #main {

                                                width : 300px;

                                                height : 300px;

                                                border : 1px solid black;

                                                display : flex;

                                                }

                                    #main div{

                                                flex : 1;

                                                }

                                </style>

                </head>

                <body>

                     <div id=”main”>

                                     <div style=”background-color : red;”> RED </div>

                                                 <div style=”background-color : green;”> GREEN </div>

                                                 <div style=”background-color : blue;”> BLUE </div>

                                </div>

                </body>

</html>

program 2 :

<html>

   <head>

      <style>

                    #main{

                                  width:350px;

                                  height:100px;

                                  border:1px solid #c3c3c3;

                                  display:flex;

                                  }

                                  #main div:nth-of-type(1) {flex-grow:1;}

                                  #main div:nth-of-type(2) {flex-grow:3;}

                                  #main div:nth-of-type(3) {flex-grow:1;}

                                  #main div:nth-of-type(4) {flex-grow:1;}

                                  #main div:nth-of-type(5) {flex-grow:1;}

                                  </style>

                                  </head>

                                  <body>

                                    <div id=”main”>

                                                <div style=”background-color:red;”>1</div>

                                                <div style=”background-color:green;”>2</div>

                                                <div style=”background-color:yellow;”>3</div>

                                                <div style=”background-color:blue;”>4</div>

                                                <div style=”background-color:pink;”>5</div>

                                                </div>

                                </body>

                </html>

Program 3 :

<html>

   <head>

      <style>

                    #main{

                                  width:350px;

                                  height:100px;

                                  border:1px solid black;

                                  display:flex;

                                  }

                                  #main div{

                                  flex-grow:1;

                                  flex-shrink:1;

                                  flex-basis:100px;

                                  }

                                  #main div:nth-of-type(2) {

                                  flex-shrink(3);

                                  }

                   </style>

    </head>

                <body>

                                <div id=”main”>

                                                <div style=”background-color:coral;”>1</div>

                                                <div style=”background-color:lightblue;”>2</div>

                                                <div style=”background-color:khaki;”>3</div>

                                                <div style=”background-color:pink;”>4</div>

                                                <div style=”background-color:lightgrey;”>5</div>

                     </div>

                </body>

</html>

Program 4 :

<html>

   <head>

      <style>

                    #main{

                                  width:400px;

                                  height:400px;

                                  border:1px solid black;

                                  display:flex;

                                  display-direction:row-reverse;

                                  /*row/row-reverse/column/column-reverse*/

                                  }

                                  #main div{

                                  width:50px;

                                  height:50px;

                                  }

                   </style>

    </head>

                <body>

                                <div id=”main”>

                                                <div style=”background-color:coral;”>A</div>

                                                <div style=”background-color:lightblue;”>B</div>

                                                <div style=”background-color:khaki;”>C</div>

                                                <div style=”background-color:pink;”>D</div>

                                                <div style=”background-color:lightgrey;”>E</div>

                     </div>

                </body>

</html>

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *