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"
![notepad.gif]()
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".
![folder.gif]()
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>
![222222222222222.gif]()
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>
![1design.gif]()
![desinn22.gif]()
![design3.gif]()
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>
![tagdesinvn.gif]()
![tag desinn2.gif]()
Step 7: The complete output of a flexible
box model is.
Output:
![output.gif]()
![tagdesign3.gif]()