Flex-box playground

dabblet.css

/**
 * Flex-box playground
 */
body { font: 2em sans-serif; }
.s1 { font-size: 1em; }
.s2 { font-size: 2em; }
.s3 { font-size: 1.5em; }

.box {
	background: #ffcccc;
	border: 2px dashed #ff0000;
	width: 20%;
}

.container {
	border: 2px solid #0000ff;
	height: 18em;

	display: flex;

	flex-direction: row;
	flex-wrap: wrap;
	/*flex-flow: column wrap;*/

	/**
	* Align main flow 
	*/
	justify-content: 
		/*flex-start */
		/*flex-end*/
		/*center*/
		space-around
		/*space-between*/
	;
	
	/*
	* Align multiple lines container
	*/
	align-content: 		
		/*flex-start*/
		/*flex-end*/
		/*center*/
		/*space-around*/
		/*space-between*/
		/*stretch*/
	;	
	
	/*
	* Align the items within a line
	*/
	align-items: 
		/*flex-start*/
		/*flex-end*/
		center
		/*baseline*/
		/*stretch*/
	;
	
}

.box:nth-child(1) {
	order: 1;
}
.box:nth-child(2) {
	order: 2;
}
.box:nth-child(3) {
	order: 3;
}

dabblet.html

<div class="container">
	<div class="box s1">A</div>
	<div class="box s2">B</div>
	<div class="box s3">C</div>
	<!--
	<div class="box s3">D</div>	
	<div class="box s1">E</div>
	<div class="box s2">F</div>
	-->
</div>

dabblet.js

// alert('Hello world!');

var input = document.querySelector('input');
  input.dataset.value = input.value; // Set an initial value.
  input.addEventListener('change', function(e) {
    this.dataset.value = this.value; // Update the view.
  });

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}