CodeRepublics Lab - CodeRepublics

<!DOCTYPE html>
<html>
<head>
	<style>
		.flex-container1 {
		display: flex;
		height: 100px;
		flex-direction: row;
		align-items: flex-start;
		background-color: DodgerBlue;
	}
	
	.flex-container2 {
		display: flex;
		flex-direction: row;
		background-color: red;
		height: 100px;
		align-items: flex-end;
	}
	
	.flex-container3 {
		display: flex;
		flex-direction: row;
		height: 100px;
		align-items: center;
		background-color: tomato;
	}
	
	.flex-container4 {
		display: flex;
		flex-direction: row;
		height: 100px;
		align-items: baseline;
		background-color: green;
	}
	
	.flex-container4 > div {
		background-color: #f1f1f1;
		width: 100px;
		margin: 10px;
		text-align: center;
	}
	
	.flex-container5 {
		display: flex;
		flex-direction: row;
		height: 100px;
		align-items: stretch;
		background-color: skyblue;
	}
	
	.flex-item {
		background-color: #f1f1f1;
		margin: 5px;
		padding: 15px;
		font-size: 20px;
		height: 25px;
	}
	</style>
</head>

<body>
	<h2>Align-items: Flex-start</h2>
	<div class="flex-container1">
		<div class="flex-item">A</div>
		<div class="flex-item">B</div>
		<div class="flex-item">C</div>
	</div>
	<h2>Align-items: Flex-end</h2>
	<div class="flex-container2">
		<div class="flex-item">A</div>
		<div class="flex-item">B</div>
		<div class="flex-item">C</div>
	</div>
	<h2>Align-items: Center</h2>
	<div class="flex-container3">
		<div class="flex-item">A</div>
		<div class="flex-item">B</div>
		<div class="flex-item">C</div>
	</div>
	<h2>Align-items: Baseline</h2>
	<div class="flex-container4">
		<div>
			<h1>A</h1></div>
		<div>
			<h4>B</h4></div>
		<div>
			<h2>C</h2></div>
	</div>
	<h2>Align-items: Stretch</h2>
	<div class="flex-container5">
		<div style="height:auto;" class="flex-item">A</div>
		<div style="height:auto;" class="flex-item">B</div>
		<div style="height:auto;" class="flex-item">C</div>
	</div>
</body>
</html>