ftonato/basic-flexbox.html

## basic-flexbox.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Basic Flexbox</title>

	<style>
		* {
			margin: 0;
			padding: 0;
		}

		main {
			display: flex;
			flex-wrap: wrap;
			height: 100%;
		}
		.box {
			padding-top: 2rem;
			padding-bottom: 2rem;
		}
		.first {
			width: 100%;
			order: 1;
			background-color: #f1c40f;
		}
		.second {
			width: 33.33%;
			order: 2;
			background-color: #e67e22;
		}
		.third {
			width: 33.33%;
			order: 3;
			background-color: #e74c3c;
		}
		.fourth {
			width: 33.33%;
			order: 4;
			background-color: #9b59b6;
		}
		.fifth {
			width: 50%;
			order: 5;
			background-color: #1abc9c;
		}
		.sixth {
			width: 50%;
			order: 5;
			background-color: #34495e;
		}

	</style>
</head>
<body>

	<main>
		<div class="box first">&nbsp;</div>
		<div class="box second">&nbsp;</div>
		<div class="box third">&nbsp;</div>
		<div class="box fourth">&nbsp;</div>
		<div class="box fifth">&nbsp;</div>
		<div class="box sixth">&nbsp;</div>
	</main>

</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Basic Flexbox</title>

	<style>
	* {
	margin: 0;
	padding: 0;
	}

	main {
	display: flex;
	flex-wrap: wrap;
	height: 100%;
	}
	.box {
	padding-top: 2rem;
	padding-bottom: 2rem;
	}
	.first {
	width: 100%;
	order: 1;
	background-color: #f1c40f;
	}
	.second {
	width: 33.33%;
	order: 2;
	background-color: #e67e22;
	}
	.third {
	width: 33.33%;
	order: 3;
	background-color: #e74c3c;
	}
	.fourth {
	width: 33.33%;
	order: 4;
	background-color: #9b59b6;
	}
	.fifth {
	width: 50%;
	order: 5;
	background-color: #1abc9c;
	}
	.sixth {
	width: 50%;
	order: 5;
	background-color: #34495e;
	}

	</style>
	</head>
	<body>

	<main>
	<div class="box first"> </div>
	<div class="box second"> </div>
	<div class="box third"> </div>
	<div class="box fourth"> </div>
	<div class="box fifth"> </div>
	<div class="box sixth"> </div>
	</main>

	</body>
	</html>