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