<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<header>
<h1>Navigation menus using CSS flexbox</h1>
<p>The markup for all examples illustrated below are identical as follow:</p>
<pre><code><nav>
<ul>
<li><a href="#" title="Home">Home</a></li>
<li><a href="#" title="Blog">Blog</a></li>
<li><a href="#" title="Work">Work</a></li>
<li><a href="#" title="Resources">Resources</a></li>
<li><a href="#" title="Meta">Meta</a></li>
</ul>
</nav></code></pre>
<p>The CSS code provided in each of the demo below can be toggled. They are written in the flavour of <a href="http://sass-lang.com/">Sassy CSS</a>.</p>
</header>
<section>
<h2>Scenario 1</h2>
<p>Equal width elements</p>
<nav id="sc1">
<ul>
<li><a href="#" title="Home">Home</a></li>
<li><a href="#" title="Blog">Blog</a></li>
<li><a href="#" title="Work">Work</a></li>
<li><a href="#" title="Resources">Resources</a></li>
<li><a href="#" title="Meta">Meta</a></li>
</ul>
</nav>
<p>This is the equivalent of specifing each element to be an equal fraction of its parent's full width, i.e. each fraction is of identical size and the sum of their widths is equivalent to the parent's full width.</p>
<p>This effect is achieved with the help of <code>flex: 1 1 100%</code> on the flex items, which is a shorthand for:</p>
<pre><code>flex-grow: 1;
flex-shrink: 1;
flex-basis: 100%;</code></pre>
<p>The property tells the browser to grow the items equally until they fill the full width of their flex parent, which is the <code><ul></code> element in this case. The <code>flex-basis</code> of 100% ensures that all items will be the same size and treated equally.</p>
