Untitled

<html>
<head>

<style>

.container {
	display: flex;
	background-image: linear-gradient(to bottom right, #200020, purple);
	min-height: 50px;
}

.container > * {
	background-image: linear-gradient(to bottom right, yellow, orange);
	margin: 10px 0;
}

.gridcontainer {
	display: grid;
	grid-template-columns: 100px repeat(2, 200px) auto 200px;
	grid-template-rows: repeat(4, 100px);
	grid-gap: 5px;
}

.gridcontainer div {
	background-image: linear-gradient(to bottom right, #D22, #422);
}

</style>

</head>
<body>

<div class="cssgrid">

<div class="gridcontainer">
	<div>Cell Content</div>
	<div>Cell Content</div>
	<div>Cell Content</div>
	<div>Cell Content</div>
	<div>Cell Content</div>
	<div>Cell Content</div>
	<div>Cell Content</div>
	<div>Cell Content</div>
	<div>Cell Content</div>
	<div>Cell Content</div>
	<div>Cell Content</div>
	<div>Cell Content</div>
	<div>Cell Content</div>
	<div>Cell Content</div>
	<div>Cell Content</div>
</div>

</div>


<div class="flexboxstuff">
<label>basic flex</label>
<div class="container">
	<div>Item 1</div>
	<div>Here is an item 2</div>
	<div>Item 3</div>
</div>

<label>even fill</label>
<div class="container">
	<div style="flex: 1 100%">Item 1</div>
	<div style="flex: 1 100%">Here is an item 2</div>
	<div style="flex: 1 100%">Item 3</div>
</div>

<label>ordered</label>
<div class="container">
	<div style="order:3">Item 1</div>
	<div style="order:1">Here is an item 2</div>
	<div style="order:2">Item 3</div>
</div>

<label>direction right</label>
<div class="container" style="flex-direction: row-reverse;">
	<div>Item 1</div>
	<div>Here is an item 2</div>
	<div>Item 3</div>
</div>

<label>direction down</label>
<div class="container" style="flex-direction: column;">
	<div>Item 1</div>
	<div>Here is an item 2</div>
	<div>Item 3</div>
</div>

<label>direction up</label>
<div class="container" style="flex-direction: column-reverse;">
	<div>Item 1</div>
	<div>Here is an item 2</div>
	<div>Item 3</div>
</div>

<label>grow</label>
<div class="container">
	<div>Item 1</div>
	<div style="flex-grow: 10">Here is an item 2</div>
	<div>Item 3</div>
</div>

<label>wrap</label>
<div class="container" style="flex-wrap: wrap;">
	<div style="width:800px;">Item 1</div>
	<div style="width:800px;">Here is an item 2</div>
	<div style="width:800px;">Item 3</div>
</div>

<label>center justify</label>
<div class="container" style="justify-content: center;">
	<div>Item 1</div>
	<div>Here is an item 2</div>
	<div>Item 3</div>
</div>

<label>space-between</label>
<div class="container" style="justify-content: space-between;">
	<div>Item 1</div>
	<div>Here is an item 2</div>
	<div>Item 3</div>
</div>

<label>space-around</label>
<div class="container" style="justify-content: space-around;">
	<div>Item 1</div>
	<div>Here is an item 2</div>
	<div>Item 3</div>
</div>

<label>space-evenly</label>
<div class="container" style="justify-content: space-evenly;">
	<div>Item 1</div>
	<div>Here is an item 2</div>
	<div>Item 3</div>
</div>

<label>align start</label>
<div class="container" style="align-items: flex-start;">
	<div style="min-height: 50px;">Item 1</div>
	<div style="min-height: 150px;">Here is an item 2</div>
	<div style="min-height: 75px;">Item 3</div>
</div>

<label>align end</label>
<div class="container" style="align-items: flex-end;">
	<div style="min-height: 50px;">Item 1</div>
	<div style="min-height: 150px;">Here is an item 2</div>
	<div style="min-height: 75px;">Item 3</div>
</div>

<label>align stretch</label>
<div class="container" style="align-items: stretch;">
	<div style="min-height: 50px;">Item 1</div>
	<div style="min-height: 150px;">Here is an item 2</div>
	<div style="min-height: 75px;">Item 3</div>
</div>

<label>align center</label>
<div class="container" style="align-items: center;">
	<div style="min-height: 50px;">Item 1</div>
	<div style="min-height: 150px;">Here is an item 2</div>
	<div style="min-height: 75px;">Item 3</div>
</div>

<label>align baseline</label>
<div class="container" style="align-items: baseline;">
	<div style="min-height: 50px; padding-top: 20px;">Item 1</div>
	<div style="min-height: 150px;">Here is an item 2</div>
	<div style="min-height: 75px;">Item 3</div>
</div>

<label>align self</label>
<div class="container">
	<div style="min-height: 150px;">big boy</div>
	<div style="min-height: 50px; align-self: auto;">auto</div>
	<div style="min-height: 50px; align-self: flex-start;">flex-start</div>
	<div style="min-height: 75px; align-self: flex-end;">flex-end</div>
	<div style="min-height: 50px; align-self: center;">centered</div>
	<div style="min-height: 75px; align-self: stretch;">stretch</div>
</div>

</div>


</body>

</script>
</html>