Thursday, 15 November 2012

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;
    } 

4 comments:

ninest123 said...

replica watches, louis vuitton, air jordan pas cher, longchamp pas cher, ray ban sunglasses, nike air max, oakley sunglasses, ugg boots, oakley sunglasses, nike free, nike roshe run, louboutin shoes, michael kors, louboutin, longchamp outlet, louis vuitton outlet, polo ralph lauren outlet, longchamp outlet, tiffany jewelry, tiffany and co, jordan shoes, tory burch outlet, ugg boots, air max, louis vuitton, replica watches, nike free, louis vuitton, uggs on sale, sac longchamp, burberry, chanel handbags, oakley sunglasses, polo ralph lauren outlet, louboutin outlet, longchamp, louis vuitton outlet, prada outlet, cheap oakley sunglasses, oakley sunglasses, christian louboutin outlet, louboutin pas cher, ralph lauren pas cher, ray ban sunglasses, kate spade outlet, ray ban sunglasses, nike air max, prada handbags, gucci outlet, nike outlet

ninest123 said...

burberry outlet online, nike air max, coach purses, nike air max, michael kors, timberland, new balance pas cher, true religion jeans, kate spade handbags, nike free run uk, north face, true religion jeans, ralph lauren uk, air force, hollister pas cher, ray ban uk, converse pas cher, lacoste pas cher, michael kors outlet, michael kors outlet, ugg boots, michael kors outlet, michael kors outlet, coach outlet, vans pas cher, hollister, burberry, coach outlet, nike blazer, oakley pas cher, vanessa bruno, mulberry, ugg boots, lululemon, hermes, tn pas cher, ray ban pas cher, sac guess, hogan, true religion jeans, abercrombie and fitch, true religion outlet, michael kors, nike air max, michael kors outlet, replica handbags, michael kors, nike roshe, north face, michael kors

ninest123 said...

longchamp, iphone 5s cases, hollister, ferragamo shoes, herve leger, jimmy choo shoes, giuseppe zanotti, north face outlet, vans shoes, mont blanc, nike huarache, celine handbags, iphone cases, iphone 6s cases, nike trainers, lululemon, louboutin, ralph lauren, iphone 6 cases, babyliss, s5 cases, hollister, north face outlet, nfl jerseys, bottega veneta, soccer shoes, oakley, baseball bats, abercrombie and fitch, ghd, chi flat iron, valentino shoes, beats by dre, asics running shoes, wedding dresses, reebok shoes, timberland boots, ipad cases, mac cosmetics, mcm handbags, nike roshe, nike air max, insanity workout, iphone 6s plus cases, birkin bag, p90x workout, hollister, instyler, iphone 6 plus cases, soccer jerseys, new balance

ninest123 said...

barbour jackets, toms shoes, lancel, supra shoes, juicy couture outlet, moncler, moncler, louis vuitton, thomas sabo, hollister, canada goose uk, canada goose, louis vuitton, doudoune canada goose, converse outlet, canada goose outlet, replica watches, bottes ugg, canada goose outlet, nike air max, gucci, moncler, pandora jewelry, canada goose, karen millen, marc jacobs, converse, moncler, ray ban, wedding dresses, montre pas cher, ugg,ugg australia,ugg italia, moncler, pandora charms, canada goose, moncler, canada goose, ugg,uggs,uggs canada, moncler, vans, swarovski crystal, sac louis vuitton pas cher, pandora jewelry, juicy couture outlet, louis vuitton, louis vuitton, moncler outlet, coach outlet, swarovski, ugg boots uk, links of london, ugg pas cher, pandora charms