flexbox use case

dabblet.css

/* flexbox use case */
.products {
	padding: 0;
	margin: 0;
}
.product {
	background-color: #FFC;
	font-size: 60%;
	list-style: none;
	margin: 1em;
	padding: 1em;
}
.product-name {
	margin: 0 0 .5em;
}
.product-photo {
	max-width: 100%;
}
.product-buy {
	width: 100%;
	font-size: inherit;
	border: 0;
	background-color: #6F6;
	padding: .5em;
}

/* flexbox rules */
.flex.products {
	display: flex;
	flex-flow: wrap;
}
.flex .product {
	display: flex;
	flex-direction: column;
	align-items: center; /* default: stretch */
	flex: 0 1 calc(33% - 2em); /* 33% considers box-sizing */
	box-sizing: border-box;
}
.flex .product-description {
	flex: 1 1 auto;
}

/* inline-block rules */
.ib .product {
	display: inline-block;
	width: 33%;
	box-sizing: border-box;
	vertical-align: top;
}

/* table rules */
.table.products {
	display: table;
}
.table .product {
	display: table-cell;
}

dabblet.html

<ul class="products flex">
	<!-- first -->
	<li class="product">
		<h1 class="product-name">Product</h1>
		<img src="http://placehold.it/200x100" class="product-photo">
		<p class="product-description">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
		<button class="product-buy">Buy</button>
		
	<!-- second -->
	<li class="product">
		<h1 class="product-name">Product</h1>
		<img src="http://placehold.it/200x100" class="product-photo">
		<p class="product-description">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
		<button class="product-buy">Buy</button>
	
	<!-- third -->
	<li class="product">
		<h1 class="product-name">Product</h1>
		<img src="http://placehold.it/200x100" class="product-photo">
		<p class="product-description">When an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
		<button class="product-buy">Buy</button>
		
	<!-- fourth -->
	<li class="product">
		<h1 class="product-name">Product</h1>
		<img src="http://placehold.it/200x100" class="product-photo">
		<p class="product-description">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
		<button class="product-buy">Buy</button>
	
	<!-- fifth -->
	<li class="product">
		<h1 class="product-name">Product</h1>
		<img src="http://placehold.it/200x100" class="product-photo">
		<p class="product-description">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
		<button class="product-buy">Buy</button>

dabblet.js

// alert('Hello world!');

settings.json

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