<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>
<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>
<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>
<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>
<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>
li{
padding: 20px;
}
h3{
/* 	text-align: center; */
}
.item1{
	background: tomato;
}
.item2{
	background: greenyellow;
}
.item3{
	background: pink;
	font-size: 10px;
}
.item4{
	background: blueviolet;
}
.item5{
	background: yellow;
}
.container{
	display: flex;
	height: 80px;
	width: 400px;
	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;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.