css Flexbox游乐场

Posted 2021-05-13

{"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% }