Post
Ask Question

Create Flexible Box Model Using HTML5 Tools

Introduction

 
This is a simple application developed in HTML 5 that helps to show how to create the Quick hits with the Flexible Box Model application. We know that HTML 5 is the advanced version of HTML. HTML is the acronym for HyperText Markup Language which is used to display data in a browser. HTML 5 can be used to develop simple 3D, animated or multimedia applications. I hope this article helps beginners understand how to create a flexible box model application using HTML 5 tools. Now in this article, we create a flexible box and set the style of the rectangle.
  
Step 1: First open the Notepad.
  • Click->Start button->Dabble click on notepad.
  • The name of notepad is on your choice.
  • Their name is "data"
notepad.gif
 
Step 2: Create a folder.
  • In any drive create a folder with the name of your choice.
  • There we create a folder in D drive with the name "Tom".
 folder.gif
 
Step 3: Set the Flexbox style properties.
  • box-orient
  • box-lines
  • box-ordinal-group
  • box-flex-group
  • box-flex
  • box-direction
  • box-align
  • box-pack
Now for these properties, we have set the model box direction, aliment, orientation, no box line, etc.
 
Code:  Set the style of the model box using the above properties.
  1. <style>  
  2.       .box {  
  3.         /* basic styling */  
  4.         width: 550px;  
  5.         height: 400px;  
  6.         border: 1px solid #555;  
  7.         font: 14px Arial;  
  8.         /* flexbox setup */  
  9.         display: -webkit-box;  
  10.         -webkit-box-orient: horizontal;  
  11.         display: -moz-box;  
  12.         -moz-box-orient: horizontal;  
  13.         display: box;  
  14.         box-orient: horizontal;  
  15.       }  
  16.       .box > div {  
  17.         -webkit-box-flex: 1;  
  18.         -moz-box-flex: 1;  
  19.         box-flex: 1;  
  20.         -moz-transition: width 0.7s ease-out;  
  21.         -o-transition: width 0.7s ease-out;  
  22.         -webkit-transition: width 0.7s ease-out;  
  23.         transition: width 0.7s ease-out;  
  24.       }  
  25.       /* our colors */  
  26.       .box > div:nth-child(1){ background : #CCFFFF; }  
  27.       .box > div:nth-child(2){ background :#6699FF; }  
  28.       .box > div:nth-child(3){ background : #00FFFF; }  
  29.       .box > div:hover {  
  30.         width: 200px;  
  31.       }  
  32. </style>  
222222222222222.gif
 
Step4: Set the flexibility box orientation in your application.
 
Code
  1. /* flexbox, por favor */  
  2.         display: -webkit-box;  
  3.         -webkit-box-orient: horizontal;  
  4.         -webkit-box-pack: center;  
  5.         -webkit-box-align: center;  
  6.         display: -moz-box;  
  7.         -moz-box-orient: horizontal;  
  8.         -moz-box-pack: center;  
  9.         -moz-box-align: center;  
  10.         display: box;  
  11.         box-orient: horizontal;  
  12.         box-pack: center;  
  13.         box-align: center;  
Step 5: The complete flexible box model application is:
 
Code
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <style>  
  5.       .box {  
  6.         /* basic styling */  
  7.         width: 550px;  
  8.         height: 400px;  
  9.         border: 1px solid #555;  
  10.         font: 14px Arial;  
  11.         /* flexbox setup */  
  12.         display: -webkit-box;  
  13.         -webkit-box-orient: horizontal;  
  14.         display: -moz-box;  
  15.         -moz-box-orient: horizontal;  
  16.         display: box;  
  17.         box-orient: horizontal;  
  18.       }  
  19.       .box > div {  
  20.         -webkit-box-flex: 1;  
  21.         -moz-box-flex: 1;  
  22.         box-flex: 1;  
  23.         -moz-transition: width 0.7s ease-out;  
  24.         -o-transition: width 0.7s ease-out;  
  25.         -webkit-transition: width 0.7s ease-out;  
  26.         transition: width 0.7s ease-out;  
  27.       }  
  28.       /* our colors */  
  29.       .box > div:nth-child(1){ background : #CCFFFF; }  
  30.       .box > div:nth-child(2){ background :#6699FF; }  
  31.       .box > div:nth-child(3){ background : #00FFFF; }  
  32.       .box > div:hover {  
  33.         width: 200px;  
  34.       }  
  35.     </style>  
  36.     </head>  
  37.     <body>  
  38.         <div class="box">  
  39.             <div>Tom</div>  
  40.             <div>Joy</div>  
  41.             <div>Harry</div>  
  42.         </div>  
  43.     </body>  
  44. </html>  
1design.gif
 
desinn22.gif
 
design3.gif
 
Step 6: Set the flexible tag inbox model application.
 
Code
  1. <html>  
  2.     <head>  
  3.         <style>  
  4.       .centerbox {  
  5.         /* basic styling */  
  6.         width: 500px;  
  7.         height:450px;  
  8.         font-size: 14px;  
  9.         border: 1px solid #00FFFF;  
  10.         background : #00FFFF;  
  11.         /* flexbox, por favor */  
  12.         display: -webkit-box;  
  13.         -webkit-box-orient: horizontal;  
  14.         -webkit-box-pack: center;  
  15.         -webkit-box-align: center;  
  16.         display: -moz-box;  
  17.         -moz-box-orient: horizontal;  
  18.         -moz-box-pack: center;  
  19.         -moz-box-align: center;  
  20.         display: box;  
  21.         box-orient: horizontal;  
  22.         box-pack: center;  
  23.         box-align: center;  
  24.       }  
  25.     </style>  
  26.     </head>  
  27.     <body>  
  28.         <div class="centerbox">  
  29.             <textarea>Please Compress The Tag</textarea>  
  30.         </div>  
  31.     </body>  
  32. </html>  
 tagdesinvn.gif
 
tag desinn2.gif
 
Step 7: The complete output of a flexible box model is.
 
Output:
 
 output.gif
 
 tagdesign3.gif


Similar Articles