HMTL 5, CSS3 and JavaScript for Windows 8 – Box element

The box element is one of the most awaited elements in HTML5. It is going to facilitate the task of creating boxes in our web site. At this point we are going to start forgetting border-… with divs or tables and concentrate in a really good implementation called box.

I am going to list all the elements compatible with almost all browsers and add some examples:

1. display:box : To define an element as a flexbox we set the display to box.
   

   .flexbox {
   display: -moz-box;
   display: -webkit-box;
   display: box;
   }



2. box-orient: Lay out the children of a div element horizontally.
   

   .rule {
   -moz-box-orient: vertical;
   -webkit-box-orient: vertical;
   box-orient: vertical;
   }



3. box-ordinal-group: Specify the display order of the child element of a box, We can reorder elements as we like, using box-ordinal-group.
   

   .box
   {
   display:-moz-box; /* Firefox */
   display:-webkit-box; /* Safari and Chrome */
   display:box;
   border:1px solid black;
   }
   .ord1
   {
   margin:5px;
   -moz-box-ordinal-group:1; /* Firefox */
   -webkit-box-ordinal-group:1; /* Safari and Chrome */
   box-ordinal-group:1;
   }
   .ord2
   {
   margin:5px;
   -moz-box-ordinal-group:2; /* Firefox */
   -webkit-box-ordinal-group:2; /* Safari and Chrome */
   box-ordinal-group:2;
   } 



4. box-flex: Define two flexible p elements. If the parent box has a total width of 300px, #p1 will have a width of 100px, and #p2 will have a width of 200px. Box-flex allow the content to expand to fill the available space.
   

   div
   {
   display:-moz-box; /* Firefox */
   display:-webkit-box; /* Safari and Chrome */
   display:box;
   width:300px;
   border:1px solid black;
   }
   #p1
   {
   -moz-box-flex:3.0; /* Firefox */
   -webkit-box-flex:3.0; /* Safari and Chrome */
   box-flex:3.0;
   border:1px solid red;
   }
   #p2
   {
   -moz-box-flex:1.0; /* Firefox */
   -webkit-box-flex:1.0; /* Safari and Chrome */
   box-flex:1.0;
   border:1px solid blue;
   }



5. box-align: Center the child elements of a div box by using the box-align and box-pack properties together.
   

   div
   {
   width:350px;
   height:100px;
   border:1px solid black;
   /* Firefox */
   display:-moz-box;
   -moz-box-orient:horizontal;
   -moz-box-pack:center;
   -moz-box-align:center;
   /* Safari and Chrome */
   display:-webkit-box;
   -webkit-box-orient:horizontal;
   -webkit-box-pack:center;
   -webkit-box-align:center;
   /* W3C */
   display:box;
   box-orient:horizontal;
   box-pack:center;
   box-align:center;
   } 



6. box-direction: This reverses the order of elements. We can use normal, reverse and inherit.
   

   #main {
   -moz-box-direction: reverse;
   -webkit-box-direction: reverse;
   box-direction: reverse;
   }



7. box-pack: Box-pack controls alignment in the direction set by orient. it centers the child elements of a div box by using the box-align and box-pack properties together.
   

   div
   {
   width:350px;
   height:100px;
   border:1px solid black;
   /* Firefox */
   display:-moz-box;
   -moz-box-orient:horizontal;
   -moz-box-pack:center;
   -moz-box-align:center;
   /* Safari and Chrome */
   display:-webkit-box;
   -webkit-box-orient:horizontal;
   -webkit-box-pack:center;
   -webkit-box-align:center;
   /* W3C */
   display:box;
   box-orient:horizontal;
   box-pack:center;
   box-align:center;
   }