New Flexbox - Space Between

HTML

<div class="parent">
    <div class="child">1</div>
    <div class="child">2</div>
    <div class="child">3</div> 
</div>

CSS

body { padding: 50px; }

.parent {
    background: hsl(0,0%,90%);
    
    display: -webkit-flex;
    display:    -moz-flex;
    display:     -ms-flex;
    display:      -o-flex;
    display:         flex;
    
    -webkit-justify-content: space-between;
       -moz-justify-content: space-between;
        -ms-justify-content: space-between;
         -o-justify-content: space-between;
            justify-content: space-between;    
}

.child {
    border: 1px solid hsl(0,0%,60%);
    padding: 20px;
}

JavaScript

/* 

NEW Flexbox support
--------------------

Just a simple example to test browser support of the NEW Flexbox. Also see http://caniuse.com/flexbox

If the boxes are layed out horizontally [1] [2] [3], then the browser supports it.
If you see incorrectness: Tweet to @simurai, thx.


Yep:
    Chrome 

Soon:
    Firefox https://twitter.com/FirefoxNightly/status/252396327823085570
    Opera http://my.opera.com/desktopteam/blog/2012/10/09/flexbox-and-supports
    IE10 http://msdn.microsoft.com/en-us/library/ie/hh673531(v=vs.85).aspx

Nope:
    Safari Desktop
    iOS 6

Unknown:
    Android Chrome
    
    
*/