Basic flexbox 3-column example

dabblet.css

/* Basic flexbox 3-column example */

body, p { 
	margin: 0; 
}

.content {
	display: flex;
	justify-content: space-between; /* center, flex-start (default), flex-end, space-around, space-between */
	align-items: stretch; /* center, flex-start, flex-end, stretch (default), baseline */
	background: rgba(0,0,0,0.3);
	color: white;
	font-family: Georgia, serif;
}
.aside-main {
	width: 20%;
	background: #343434;
	padding: 15px;
}
.article-main {
	width: 60%;
	background: #898989;
	padding: 15px;
}
.aside-extra {
	width: 20%;
	background: #565656;
	padding: 15px;
}

dabblet.html

<main class="content">
	<aside class="aside-main">
		1
	</aside>
	<article class="article-main">
		<p>“Art,” Jeanette Winterson observed in a terrific conversation about art and the human spirit, “pulls people up short. It says, don’t accept things for their face value; you don’t have to go along with any of this; you can think for yourself.” This function of art as a force of wakefulness — of wokefulness — is particularly vital and vitalizing at times of injustice and oppression, under regimes built on ideologies of mass coercion.</p>
	</article>
	<aside class="aside-extra">
		3
	</aside>
</main>

dabblet.js

// alert('Hello world!');

settings.json

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