flexbox menu 1

dabblet.css

/**
 * flexbox menu 1
 * http://forum.selfhtml.org/self/2015/apr/27/menue-horizontal-ausrichten/1638793#m1638793
 */
html
{
	padding: 0;
	background: hsl(240, 60%, 4%);
	font: bold 1em/1.2 Helvetica, sans-serif;
	color: hsl(30, 40%, 80%);
}

body
{
	margin: 0;
	padding: 0;
}

nav ul
{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	list-style: none;
	margin: 0;
	padding: 0;
	background: hsl(220, 60%, 16%);
}

nav li
{
	margin: 0;
	white-space: nowrap;
}

nav a {
	display: block;
	color: inherit;
	padding: 0.5em;
}

dabblet.html

<nav>
	<ul>
		<li><a>Star Trek</a></li>
		<li><a>The Next Generation</a></li>
		<li><a>Deep Space Nine</a></li>
		<li><a>Voyager</a></li>
		<li><a>Enterprise</a></li>
	</ul>
</nav>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}