BigAB/dabblet.css

## dabblet.css
/**
 * New syntax of Flexible box layout module (flexbox)
 * Send in the bugs
 */
.flexbox {
	display: flex; /* Further values: -webkit-inline-flex, then it's an inline element */
	flex-direction: row; /* Alignment (in this case from left to right). Further values: column (top to bottom), row-reverse (right to left), column-reverse (bottom to top) */
    /* -webkit-flex-flow: row; */ /* Same as -webkit-flex-direction, but it's a shorthand for both -webkit-flex-direction und -webkit-flex-wrap (see .flexbox6) */
    height: 100px;
    background: lightgrey;
}

.flexbox6 {
	flex-wrap: wrap; /* States how the elements wrap, if the remaining space doesn't suffice. Further values: nowrap (default value) und wrap-reverse (flips over the alignment) */
	width: 330px;
}

.flexbox6 .item {
	background: pink;
	border: 1px solid;
	flex: 80px 1; /* The optional declaration of the width states how wide the element should be preferably. Since the container is 300px wide in this case, only three fit into it at the width of 80px each. The fourth gets pushed to the next line. "1" states that all the elements should take up an even amount of space */
}

blockquote {
	border-left: 2em solid rgba(0,255,255,0.5);
	background-color: #eee;
	padding: 0.5em 2em;
	margin: 1em auto;
	color: #888;
}

## dabblet.html
<!-- content to be placed inside <body>…</body> -->
<a href="http://codepen.io/edge0703/pen/qstIo">Lifted with love from here</a>
<h2>.flexbox6</h2>
<blockquote>
<p>The elements can also be wrapped. If the width of the container (<code>width: 300px</code>) is smaller than the preferred width of the elements (<code>-webkit-flex: 80px 1</code>. The <code>1</code> states that the available space should be evenly distributed) than a wrap occurs. </p>
</blockquote>
<p>So the first little bug I see here is div #4 breaking out over it's little line up on the right hand side. Wrecking the nice pretty box.</p>
<div class="flexbox flexbox6">
	<div class="item item1">DIV 1</div>
	<div class="item item2">DIV 2</div>
	<div class="item item3">DIV 3</div>
	<div class="item item4">DIV 4</div>
	<div class="item item5">DIV 5</div>
</div>


## settings.json
{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
	/**
	* New syntax of Flexible box layout module (flexbox)
	* Send in the bugs
	*/
	.flexbox {
	display: flex; /* Further values: -webkit-inline-flex, then it's an inline element */
	flex-direction: row; /* Alignment (in this case from left to right). Further values: column (top to bottom), row-reverse (right to left), column-reverse (bottom to top) */
	/* -webkit-flex-flow: row; / / Same as -webkit-flex-direction, but it's a shorthand for both -webkit-flex-direction und -webkit-flex-wrap (see .flexbox6) */
	height: 100px;
	background: lightgrey;
	}

	.flexbox6 {
	flex-wrap: wrap; /* States how the elements wrap, if the remaining space doesn't suffice. Further values: nowrap (default value) und wrap-reverse (flips over the alignment) */
	width: 330px;
	}

	.flexbox6 .item {
	background: pink;
	border: 1px solid;
	flex: 80px 1; /* The optional declaration of the width states how wide the element should be preferably. Since the container is 300px wide in this case, only three fit into it at the width of 80px each. The fourth gets pushed to the next line. "1" states that all the elements should take up an even amount of space */
	}

	blockquote {
	border-left: 2em solid rgba(0,255,255,0.5);
	background-color: #eee;
	padding: 0.5em 2em;
	margin: 1em auto;
	color: #888;
	}
	<!-- content to be placed inside <body>…</body> -->
	<a href="http://codepen.io/edge0703/pen/qstIo">Lifted with love from here</a>
	<h2>.flexbox6</h2>
	<blockquote>
	<p>The elements can also be wrapped. If the width of the container (<code>width: 300px</code>) is smaller than the preferred width of the elements (<code>-webkit-flex: 80px 1</code>. The <code>1</code> states that the available space should be evenly distributed) than a wrap occurs. </p>
	</blockquote>
	<p>So the first little bug I see here is div #4 breaking out over it's little line up on the right hand side. Wrecking the nice pretty box.</p>
	<div class="flexbox flexbox6">
	<div class="item item1">DIV 1</div>
	<div class="item item2">DIV 2</div>
	<div class="item item3">DIV 3</div>
	<div class="item item4">DIV 4</div>
	<div class="item item5">DIV 5</div>
	</div>