Flexbox slightly more advanced example

dabblet.css

/* Flexbox slightly more advanced example */

body { margin: 0; }

.canvas {
	background: hotpink;
	width: 100vw;
	height: 100vh;
	display: flex; /* This does all the magic!!! */
	justify-content: flex-end; /* position items along the MAIN axis - default: horizontal */
	align-items: flex-end; /* position items along the CROSS axis - default: stretch */
	flex-direction: row; /* flow of items - default: row */
	flex-wrap: nowrap; /* whether they stay on one line or are shunted to the next - default: nowrap (yo!) */
	/* flex-flow: row wrap; shorthand for flex-direction and flex-wrap */
}

.box {
	background: white;
	/* height: 100px; */
	border: 1px solid black;
	text-align: center;
	line-height: 100px;
}

.box1 {	order: 3;	flex-basis: 20%;} /* Order has to do with the placement along the MAIN axis */
.box2 {	order: 4;	flex-basis: 10%;}
.box3 { order: 1;   flex-basis: 20%;}
.box4 { order: 2;   flex-basis: 20%;}

dabblet.html

<section class="canvas">
	<div class="box box1">1</div>
	<div class="box box2">2</div>
	<div class="box box3">3</div>
	<div class="box box4">4</div>
</section>

dabblet.js

// alert('Hello world!');

settings.json

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