align flex child at top-center and bottom-center, flexbox - html

Question

I need a layout using flexbox, where 2 flex-items, item-1 should be aligned at top-center, while item-2 should be at bottom-center. I could not figure out how to do that.
See the below code:
.container{
padding:10px;
background: #fff;
border-radius:5px;
margin: 45px auto;
box-shadow: 0 1.5px 0 0 rgba(0,0,0,0,1.1);
}
.item{
color: #fff;
padding: 15px;
margin: 5px;
background: #3db5da;
border-radius: 3px;
}
.container{
display: flex;
min-height: 50vh;
justify-content: center;
align-items: center;
flex-direction: column;
}
.item{
/*margin: auto;*/
/*align-self: flex-start;*/
}
.item-4{
align-self: flex-start;
}
<div class="container">
<div class="item item-4">
Flex Item
<p>Vertical and horizontal align easy!</p>
</div>
<div class="item item-5"> bottom-center</div>
</div>
Here is fiddle link : https://jsfiddle.net/q5cw4xvy/

Answer 1

What you are looking for is justify-content: space-between; to align the items until the corners.
Add that to the .container and there you go.
.container{
/*justify-content: center;*/
justify-content: space-between;
}
On .item-4 you have align-self: flex-start; but you don't need that. just remove it.
https://jsfiddle.net/q5cw4xvy/2/
To better help you understand flexbox, there is a really nice css-tricks article.

Answer 2

Do you mean something like this?
https://jsfiddle.net/da4jdff7/1/
.container{
display: flex;
min-height: 50vh;
align-items: center;
flex-direction: column;
}
.item-5 {
margin-top: auto
}