Flexbox playground
{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
// alert('Hello world!');
<article class="dark" style="background: red;">red</article>
<article style="background: lime;">lime</article>
<article class="dark" style="background: blue;">blue</article>
<article style="background: aqua;">aqua</article>
<article class="dark" style="background: fuchsia;">fuchsia</article>
<article style="background: yellow;">yellow</article>
<article class="dark" style="background: green;">green</article>
<article class="dark" style="background: maroon;">maroon</article>
<article class="dark" style="background: navy;">navy</article>
<article class="dark" style="background: olive;">olive</article>
<article class="dark" style="background: purple;">purple</article>
<article class="dark" style="background: teal;">teal</article>
<article style="background: white;">white</article>
<article style="background: silver;">silver</article>
<article class="dark" style="background: gray;">gray</article>
<article class="dark" style="background: black;">black</article></section>
/**
* Flexbox playground
*/
body {
margin: 0;
display: flex;
flex-flow: row;
flex-wrap: wrap;
align-content: stretch;
align-items: stretch;
}
article {
display: flex;
flex: 1 1 50%;
width: 50%;
align-self: stretch;
align-items: center;
justify-content: center;
box-sizing: border-box;
}
.dark {
color: white;
}
body, html { height: 100% }