Layouts - 3 flexbox

dabblet.css

/**
 * Layouts - 3 flexbox
 */
 
 body {
 	color:white;
 	margin:0;
 }
.flex {
	display:flex;
}
.fluid {
	flex:1;
}
.double {
	flex:2;
}
article {
	overflow:hidden;
}
section:nth-child(1) {
	background:red;
}
section:nth-child(2) {
	background:blue;
}
section:nth-child(3) {
	background:green;
}

.inner-shadow {
	box-shadow:inset 0 0 35px black;
}

.column {
	padding:10px 25px;
	box-sizing:border-box;
}

dabblet.html

<article class="flex">
	<section class="column fluid inner-shadow">
	For sure ipsizzle hizzle sit amizzle, consectetuer adipiscing . Nullam sapien velizzle, i'm in the shizzle nizzle, bling bling crazy, gravida vel, bling bling. Pellentesque nizzle tortizzle. Nizzle yo mamma.
	</section>
	
	<section class="column fluid-double inner-shadow">
	For sure ipsizzle hizzle sit amizzle, consectetuer adipiscing . Nullam sapien velizzle, i'm in the shizzle nizzle, bling bling crazy, gravida vel, bling bling. Pellentesque nizzle tortizzle. Nizzle yo mamma.
	</section>
	
	<section class="column fluid inner-shadow">
	For sure ipsizzle hizzle sit amizzle, consectetuer adipiscing . Nullam sapien velizzle, i'm in the shizzle nizzle, bling bling crazy, gravida vel, bling bling. Pellentesque nizzle tortizzle. Nizzle yo mamma.
	</section>
</article>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}