flexbox-sample

by kordarei

HTML

<html>
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<style>
		body {
			height: 100vh;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-around;
		}

		.row {
			width: 100vw;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-around;	
		}

		.box {
			height: 100px;
			width: 100px;
			color: white;
			background-color: blue;
			display: flex;
			align-items: center;
			justify-content: center;	
		}
	</style>
	<div class="row first-row">
		<div class="box">
			<span>centered</span>
		</div>
		<div class="box">
			<span>centered</span>
		</div>
		<div class="box">
			<span>centered</span>
		</div>	
	</div>
	<div class="row second-row">
		<div class="box">
			<span>centered</span>
		</div>
		<div class="box">
			<span>centered</span>
		</div>
		<div class="box">
			<span>centered</span>
		</div>		
	</div>	
</body>
</html>