Flexbox

dabblet.css

/**
 * Flexbox
 */

* { box-sizing: border-box }

section
{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

#div1
{
	background: hsl(0,60%,40%);
	flex-basis: 2em;
	flex-grow: 1;
}

#div2
{
	background: hsl(50,60%,40%);
	flex-basis: 4em;
	flex-grow: 1;
}

#div3
{
	background: hsl(100,60%,40%);
	flex-basis: 2em;
	flex-grow: 1;
}

#div4
{
	background: hsl(150,60%,40%);
	flex-basis: 4em;
	flex-grow: 1;
	max-width: 6em;
}

#div5
{
	background: hsl(200,60%,40%);
}

#div6
{
	background: hsl(250,60%,40%);
}

#div7
{
	background: hsl(300,60%,40%);
	flex-grow: 1;
}

div
{
	
	margin: 0.1em;
	padding: 0.5em;
	color: white;
	font: normal 4em/1 "Helvetica Neue", Helvetica, Arial, sans-serif;
}

div:nth-child(odd)  { background: #a40 }
div:nth-child(even) { background: #048 }

dabblet.html

<section>
	<div id="div1">1</div>
	<div id="div2">2</div>
	<div id="div3">3</div>
	<div id="div4">4<br/>4</div>
	<div id="div5">5</div>
	<div id="div6">6</div>
	<div id="div7">7</div>
</section>

dabblet.js

// alert('Hello world!');

settings.json

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