Flexboxes 2

HTML

<p>A more concrete example illustrating that boxes behave like inline-blocks in Gecko and like ordinary blocks in Webkit, regardless of box-orient (try opening this page in Firefox and Chrome).</p>
<div class='flexbox flexbox-horizontal'>
  <div class='item'>First</div>
  <div class='item'>Second</div>
</div>
<div class='inline-block'>
  <div class='item'>Third</div>
</div>

CSS

body {
    background: White;
    color: Black;
    }

.flexbox {
    display: box;
    display: -moz-box;
    display: -webkit-box;
    background-color: SteelBlue;
    }
.flexbox-vertical {
    box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-box-orient: vertical;
    }
.flexbox-horizontal {
     box-orient: horizontal;
    -moz-box-orient: horizontal;
    -webkit-box-orient: horizontal;
    }

.inline-block {
    display: inline-block;
    background-color: ForestGreen;
    }

.item {
    width: 100px;
    height: 100px;
    line-height: 100px; /* for vertical-align */
    margin: 10px;
    background-color: White;

    text-align: center;
    vertical-align: middle;
    text-transform: uppercase;
    }