<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style>
#example {
width: 220px;
height: 300px;
padding: 0;
border: 1px solid #000;
display: -webkit-flex; /* Safari */
-webkit-align-items: flex-end; /* Safari 7.0+ */
display: flex;
align-items: flex-end;
}
#example li {
-webkit-flex: 1; /* Safari 6.1+ */
flex: 1;
list-style: none;
}
</style>
</head>
<body>
<h2>Пример align-items: flex-end;</h2>
<ul id="example">
<li style="background-color:#8ebf42;">Green</li>
<li style="background-color:#1c87c9;">Blue</li>
<li style="background-color:#ccc;">Gray</li>
</ul>
</body>
</html>