Untitled

dabblet.css

h1 {color: #345; text-shadow: 1px 1px 2px #aaa; font-size:1.8em}
h2 {color: #567; text-shadow: 1px 1px 2px #aaa; font-size:1.1em}
h3 {margin-bottom: 0; color: #678; text-shadow: 1px 1px 2px #aaa; font-size:1em}
#sizer{
	resize:horizontal;
	max-width:800px;
	background:#ccc;
	padding:40px;
	border-radius:20px;
	overflow:hidden;
}
.kiwi {
	width: 100%;
	outline: 1px solid #333;
	background: #eee;
	margin: 0; padding: 0;
	display: flex; /* OK chrome 21 */
	justify-content: flex-start;
	display: flex;
	justify-content: flex-start;
	flex-wrap:wrap;
}
.kiwi:nth-of-type(2) {
	justify-content: flex-end;
}
.kiwi:nth-of-type(3) {
	justify-content: center;
}
.kiwi:nth-of-type(4) {
	justify-content: space-between;
}
.kiwi:nth-of-type(5) {
	justify-content: space-around;
}
.kiwi:nth-of-type(6) {
	justify-content: space-evenly;
}
li {color: #fff; padding: 10px; list-style: none; background: tomato}
li:nth-child(2) {background: orange}
li:nth-child(3) {background: #800000}
li:nth-child(4) {background: #FF3399}
li:nth-child(5) {background: #3399FF}

dabblet.html

<h1>Flexible Box Model</h1>
<h2>justify-content: ...</h2>
<h3>flex-start</h3>
<div id="sizer">
	<ul class="kiwi">
		<li>Salade</li>
		<li>Tomate</li>
		<li>Oignons</li>
		<li>Choucroute</li>
		<li>Picon bière</li>
	</ul>

	<h3>flex-end</h3>
	<ul class="kiwi">
		<li>Salade</li>
		<li>Tomate</li>
		<li>Oignons</li>
		<li>Choucroute</li>
		<li>Picon bière</li>
	</ul>

	<h3>center</h3>
	<ul class="kiwi">
		<li>Salade</li>
		<li>Tomate</li>
		<li>Oignons</li>
		<li>Choucroute</li>
		<li>Picon bière</li>
	</ul>

	<h3>space-between</h3>
	<ul class="kiwi">
		<li>Salade</li>
		<li>Tomate</li>
		<li>Oignons</li>
		<li>Choucroute</li>
		<li>Picon bière</li>
	</ul>

	<h3>space-around</h3>
	<ul class="kiwi">
		<li>Salade</li>
		<li>Tomate</li>
		<li>Oignons</li>
		<li>Choucroute</li>
		<li>Picon bière</li>
	</ul>

	<h3>space-evenly</h3>
	<ul class="kiwi">
		<li>Salade</li>
		<li>Tomate</li>
		<li>Oignons</li>
		<li>Choucroute</li>
		<li>Picon bière</li>
	</ul>
</div>

dabblet.js

// alert('Hello world!');

settings.json

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