Multiline boxes

dabblet.css

/* Multiline boxes */
.exp {
	width: 40ch;
	margin: 1em;
	background-color: #FFB;
}
.caixinha {
	width: 10ch;
	height: 2em;
	background-color: #FF6;
	border: .25em solid orange;
}
.text {
	text-align: justify;
	text-align-last: center;
}
.text .caixinha {
	display: inline-block;
}
.flex {
	display: flex;
	flex-flow: wrap;
	justify-content: space-between;
}
.tab {
	display: table;
}
.tab .caixinha {
	display: table-cell;
}

dabblet.html

<section class="text exp">
	<div class=caixinha></div>
	<div class=caixinha></div>
	<div class=caixinha></div>
	<div class=caixinha></div>
	<div class=caixinha></div>
	<div class=caixinha></div>
	<div class=caixinha></div>
	<div class=caixinha></div>
</section>

<section class="flex exp">
	<div class=caixinha></div>
	<div class=caixinha></div>
	<div class=caixinha></div>
	<div class=caixinha></div>
	<div class=caixinha></div>
	<div class=caixinha></div>
	<div class=caixinha></div>
	<div class=caixinha></div>
</section>

<section class="tab exp">
	<div class=caixinha></div>
	<div class=caixinha></div>
	<div class=caixinha></div>
	<div class=caixinha></div>
	<div class=caixinha></div>
	<div class=caixinha></div>
	<div class=caixinha></div>
	<div class=caixinha></div>
</section>

dabblet.js

// alert('Hello world!');

settings.json

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