flexbox.html

<!DOCTYPE html>
<html>
	<head>
		<title> CSS FlexBox </title>
		<style>

			.container {
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
			}

			.item {
			}

			/* default styles */
			* {
				margin: 0;
			}

			.item {
				color: #FFF;
				font-size: 100px;
				text-align: center;
				text-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1);
				padding: 10px;
			}

			.item1 { background-color: #e27065 }
			.item2 { background-color: #e29565 }
			.item3 { background-color: #e2ae65 }
			.item4 { background-color: #e2e165 }
			.item5 { background-color: #65e271 }

		</style>
	</head>
	<body>
		<div class="container">
			<div class="item item1">1</div>
			<div class="item item2">2</div>
			<div class="item item3">3</div>
			<div class="item item4">4</div>
			<div class="item item5">5</div>
		</div>
	</body>
</html>