ffoodd/dabblet.css

## dabblet.css
/**
 * Flexbox layout
 */
*:not(html) {
	background: rgba(30, 144, 255, .5);
	color: white;
	font-family: sans-serif;
	font-weight: 700;
	padding: 1em;
	text-align:center;
}

body {
	display: flex; /* crée un contexte flex pour ses enfants */
	flex-direction: column; /* affichage vertical */
	margin: 0;
	min-height: 100vh; /* toute la hauteur du viewport (compatible IE9+) */
	padding: 0;
}

main {
	display: flex;
	flex: 1;
	flex-direction: row;
}

main nav,
main aside {
 	flex: 0 1 10vw;
}

main div {
	background: orange;
	color: black;
	flex: 1 0 80vw;
}

## dabblet.html
<!-- content to be placed inside <body>…</body> -->
<header>Entête</header>
<main>
	<nav>Sommaire</nav>
	<div>Contenu</div>
	<aside>Réglages</aside>
</main>
<nav>Navigation</nav>

## dabblet.js
// alert('Hello world!');

## settings.json
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
	/**
	* Flexbox layout
	*/
	*:not(html) {
	background: rgba(30, 144, 255, .5);
	color: white;
	font-family: sans-serif;
	font-weight: 700;
	padding: 1em;
	text-align:center;
	}

	body {
	display: flex; /* crée un contexte flex pour ses enfants */
	flex-direction: column; /* affichage vertical */
	margin: 0;
	min-height: 100vh; /* toute la hauteur du viewport (compatible IE9+) */
	padding: 0;
	}

	main {
	display: flex;
	flex: 1;
	flex-direction: row;
	}

	main nav,
	main aside {
	flex: 0 1 10vw;
	}

	main div {
	background: orange;
	color: black;
	flex: 1 0 80vw;
	}
	<!-- content to be placed inside <body>…</body> -->
	<header>Entête</header>
	<main>
	<nav>Sommaire</nav>
	<div>Contenu</div>
	<aside>Réglages</aside>
	</main>
	<nav>Navigation</nav>