stupid flex (X,Y) with float & text-align

dabblet.css

/* stupid flex (X,Y) with float & text-align */
header {
	background:turquoise;
	overflow:hidden;
	border:1px solid;
	margin:1em 0;
}
header:before {
	content:'';
	height:4em;
	float:left;
}
header h1 {
	clear:left;
	float:left;
}
header h2 {
	float:right;
	margin-top:-4em;
}
header h1,
header h2,
header h3 {
	background:yellow;
	width:100%;
	
}

/* usual */
nav {
	margin:1em 0;
	background:turquoise;
	border:solid 1px;
}
nav h1,
nav h2,
nav h3 {
	background:yellow;
}
/* text-align:justify for inline-boxes */
article {
	text-align:justify;
	background:turquoise;
	line-height:0;
	border:1px solid;
	margin:1em 0;
}
article:after {
	content:'';
	width:80%;
	display:inline-block;
	vertical-align:bottom;
}
article h1, 
article h2, 
article h3 {
	background:yellow;
	display:inline-block;
	line-height:1.2em;
	vertical-align:middle;
	margin:0;
	width:80px;
	text-align:center;
}
/* distribution par 3 colonnes */
body {
	column-width:350px;
	text-align:center;
	column-rule:solid red 3px;
	background:#999;
	padding:5px;
}
html {background:white;}

dabblet.html

<header>
	<h1>titre 1</h1>
	<h2>titre 2</h2>
	<h3>titre 3</h3>
</header>

<nav>
	<h1>titre 1</h1>
	<h2>titre 2</h2>
	<h3>titre 3</h3>
</nav>

<article>
	<h1>titre 1</h1>
	<h2>titre 2</h2>
	<h3>titre 3</h3>
</article>

<article dir="rtl">
	<h1>titre 1</h1>
	<h2>titre 2</h2>
	<h3>titre 3</h3>
</article>
<p>Play!</p>
<p><strong>check html flux and screen flux to get it :) </strong></p>

dabblet.js

// alert('Hello world!');

settings.json

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