<div class="main-container"><div class="top"><div><h3>align-items: center;</h3>
	<ul class="container flex-container1">
		<li class="flex-item item1">one</li>
		<li class="flex-item item2">two</li>
		<li class="flex-item item3">three</li>
		<li class="flex-item item4">four</li>
		<li class="flex-item item5">five</li>
	</ul></div>
<div><h3>align-items: stretch;</h3>
	<ul class="container flex-container2">
		<li class="flex-item item1">one</li>
		<li class="flex-item item2">two</li>
		<li class="flex-item item3">three</li>
		<li class="flex-item item4">four</li>
		<li class="flex-item item5">five</li>
	</ul></div>
<div><h3>align-item: baseline;</h3>
	<ul class="container flex-container3">
		<li class="flex-item item1">one</li>
		<li class="flex-item item2">--two--</li>
		<li class="flex-item item3">three</li>
		<li class="flex-item item4">four <br>4 times</li>
		<li class="flex-item item5">five</li>
	</ul></div></div><div class="bottom">
<div><h3>align-items: flex-start;</h3>
	<ul class="container flex-container4">
		<li class="flex-item item1">one</li>
		<li class="flex-item item2">two</li>
		<li class="flex-item item3">three</li>
		<li class="flex-item item4">four</li>
		<li class="flex-item item5">five</li>
	</ul></div>
<div><h3>align-items: flex-end;</h3>
	<ul class="container flex-container5">
		<li class="flex-item item1">one</li>
		<li class="flex-item item2">two</li>
		<li class="flex-item item3">three</li>
		<li class="flex-item item4">four</li>
		<li class="flex-item item5">five</li>
	</ul></div></div>
</div>

li{
padding: 10px;
}
h3{
/* 	text-align: center; */
}
.item1{
	background: tomato;
}
.item2{
	background: greenyellow;
}
.item3{
	background: pink;
	font-size: 10px;
}
.item4{
	background: blueviolet;
}
.item5{
	background: yellow;
}
.main-container{
	display: flex;
	flex-direction: column;
}
.main-container >div{
	display: flex;
}
.main-container >div div{
	margin: 0px 10px;
}
.container{
	display: flex;
	flex-direction: column;
	height: 200px;
	width: 80px;
	margin: 0px 20px;
	padding: 0;
  margin: 0;
  list-style: none;
	border: 2px solid mistyrose;
}
.flex-container1{
	align-items: center;
}
.flex-container2{
	align-items: stretch;
}
.flex-container3{
	align-items: baseline;
}
.flex-container4{
	align-items: flex-start;
}
.flex-container5{
	align-items: flex-end;
}