©TCP-tryWWW

<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<title>CSS3 Flexible Box Layout</title>
	<style>
		.flexbox {
			background-color: dimgray;
			width: 400px;
			height: 250px;
			border-radius: 15px;
			display: -webkit-flex;
			display: flex;
		}
		#start {
			-webkit-align-items: flex-start;
			align-items: flex-start;
		}
		#center {
			-webkit-align-items: center;
			align-items: center;
		}
		#end {
			-webkit-align-items: flex-end;
			align-items: flex-end;
		}
		.item {
			background-color: darkgray;
			border-radius: 10px;
			width: 80px;
			margin: 10px;
			color: white;
			font-size: 26px;
			text-align: center;
			line-height: 50px;
		}
	</style>
</head>

<body>

	<h1>align-items 속성을 이용한 수직 정렬</h1>

	<h3>align-items의 속성값이 flex-start입니다.</h3>
	<div id="start" class="flexbox">
		<div class="item">1</div>
		<div class="item">2</div>
		<div class="item">3</div>
	</div>
	<h3>align-items의 속성값이 center입니다.</h3>
	<div id="center" class="flexbox">
		<div class="item">1</div>
		<div class="item">2</div>
		<div class="item">3</div>
	</div>
	<h3>align-items의 속성값이 flex-end입니다.</h3>
	<div id="end" class="flexbox">
		<div class="item">1</div>
		<div class="item">2</div>
		<div class="item">3</div>
	</div>

</body>

</html>