Create Flexible Box Model Using HTML5 Tools

Manish Singh
May 19, 2012
7.7k
0
0
Article

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 acronum for Hyper Text Markup Language which is used to display data in a browser. HTML 5 can be used to develop simple 3D, annimated 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 the 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.
There name is "data"

Step 2: Create a folder.

In any drive create a folder with the name of your choice.
There we create folder in D drive with the name "Tom".

Step 3: Set the Flex box 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, oriantation, no of box line etc.

Code Set the style of the model box using above properties.
<style>
      .box {
        /* basic styling */
        width: 550px;
        height: 400px;
        border: 1px solid #555;
        font: 14px Arial;
        /* flexbox setup */
        display: -webkit-box;
        -webkit-box-orient: horizontal;
        display: -moz-box;
        -moz-box-orient: horizontal;
        display: box;
        box-orient: horizontal;
      }
      .box > div {
        -webkit-box-flex: 1;
        -moz-box-flex: 1;
        box-flex: 1;
        -moz-transition: width 0.7s ease-out;
        -o-transition: width 0.7s ease-out;
        -webkit-transition: width 0.7s ease-out;
        transition: width 0.7s ease-out;
      }
      /* our colors */
      .box > div:nth-child(1){ background : #CCFFFF; }
      .box > div:nth-child(2){ background :#6699FF; }
      .box > div:nth-child(3){ background : #00FFFF; }
      .box > div:hover {
        width: 200px;
      }
</style>

Step4: Set the flexibility box orientation in your application.

Code
/* flexbox, por favor */
        display: -webkit-box;
        -webkit-box-orient: horizontal;
        -webkit-box-pack: center;
        -webkit-box-align: center;
        display: -moz-box;
        -moz-box-orient: horizontal;
        -moz-box-pack: center;
        -moz-box-align: center;
        display: box;
        box-orient: horizontal;
        box-pack: center;
       box-align: center;

Step 5: The complete flexible box model application is:

Code

<!DOCTYPE html>
<html>
<head>
    <style>
      .box {
        /* basic styling */
        width: 550px;
        height: 400px;
        border: 1px solid #555;
        font: 14px Arial;
        /* flexbox setup */
        display: -webkit-box;
        -webkit-box-orient: horizontal;
        display: -moz-box;
        -moz-box-orient: horizontal;
        display: box;
        box-orient: horizontal;
      }
      .box > div {
        -webkit-box-flex: 1;
        -moz-box-flex: 1;
        box-flex: 1;
        -moz-transition: width 0.7s ease-out;
        -o-transition: width 0.7s ease-out;
        -webkit-transition: width 0.7s ease-out;
        transition: width 0.7s ease-out;
      }
      /* our colors */
      .box > div:nth-child(1){ background : #CCFFFF; }
      .box > div:nth-child(2){ background :#6699FF; }
      .box > div:nth-child(3){ background : #00FFFF; }
      .box > div:hover {
        width: 200px;
      }
    </style>
</head>
<body>
    <div class="box">
      <div>Tom</div>
      <div>Joy</div>
      <div>Harry</div>
    </div>
</body>
</html>

Step 6: Set the flexible tag in box model application.

Code

<html>
<head>
    <style>
      .centerbox {
        /* basic styling */
        width: 500px;
        height:450px;
        font-size: 14px;
        border: 1px solid #00FFFF;
        background : #00FFFF;
        /* flexbox, por favor */
        display: -webkit-box;
        -webkit-box-orient: horizontal;
        -webkit-box-pack: center;
        -webkit-box-align: center;
        display: -moz-box;
        -moz-box-orient: horizontal;
        -moz-box-pack: center;
        -moz-box-align: center;
        display: box;
        box-orient: horizontal;
        box-pack: center;
        box-align: center;
      }
    </style>
</head>
<body>
    <div class="centerbox">
      <textarea>Please Compress The Tag</textarea>
    </div>
</body>
</html>