CSS3 Flexbox

A simple CSS Flexbox Example.

HTML

<h1>CSS Flexbox</h1>
<p>As of <span id="updated">5/19/13</span> this is the current working flexbox model.</p>
<pre>
    <code>.element {display:-webkit-flex; display:flex}</code>
</pre>

<h2>Flexbox Example</h2>
<nav class="flex">
    <ul>
        <li><a href="#">Link One asdfhasdjkfhasjldfhjaksdkflkasdf</a></li>
        <li><a href="#">Link Two</a></li>
        <li><a href="#">Link Three</a></li>
    </ul>
</nav>

<h2>Floated Example</h2>
<nav class="float">
    <ul>
        <li><a href="">Link One</a></li>
        <li><a href="">Link Two</a></li>
        <li><a href="">Link Three</a></li>
    </ul>
</nav>

CSS

* {margin:0; padding:0;}
body {font: 400 14px Sans-Serif; padding:20px;}
h1 {margin:0 0 10px 0; padding:0;}
p {}
a {color:#000;}
code {padding:10px; background:#FDFFE6; border:1px solid #F0F2DA; display:block;}

#updated {color:#fff; text-shadow:1px 1px 0px #000; padding:3px 6px; background:green; border-radius:3px;}

.flex ul {list-style-type:none; margin:0 0 20px 0;padding:10px; background:#eee; display:-webkit-flex; display:flex; flex-flow:row wrap;}
.flex li a {color:#000; margin:0 10px 0 0; padding:10px; background:#ccc; text-decoration:none; display:block;}
.flex li a:hover {background:#fff;}

.float ul {list-style-type:none; padding:10px; background:#eee; overflow:hidden;}
.float li a {margin:0 10px 0 0; padding:10px; background:#ccc; text-decoration:none; display:block; float:left;}
.float li a:hover {background:#fff;}