Vertically aligning two flex items [duplicate] - html

Question

This question already has answers here:
Prevent flex items from rendering side to side
(3 answers)
Closed 5 years ago.
I have a flex container .container and two flex items: item-one and item-two. I want to vertically center the first item and to stick the second to the bottom.
I don't know how to vertically align the first item in this context.
HTML:
<div class="container">
<div class="item-one">Item One</div>
<div class="item-two">Item Two</div>
</div>
CSS:
html, body {
height: 100%;
margin: 0;
}
.container {
width: 500px;
margin: 0 auto;
border: 5px solid orange;
height: 100%;
/* Flex properties */
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
.item-one {
border: 5px solid yellow;
flex-basis: 500px;
}
.item-two {
border: 5px solid red;
align-self: flex-end;
}
CodePen

Answer 1

You could use auto margins to align the elements like that. This will allow you to distribute any positive free space in the direction of the auto margin.
In this case, you would change flex-direction to column in order to make the flexbox items flow vertically. Then you could set margin-top: auto/margin-bottom: auto on the first flexbox item in order to center it vertically and ensure that the space above and below it is equal. In doing so, this will push the second item to the bottom:
Updated Example
html, body {
height: 100%;
margin: 0;
}
.container {
width: 500px;
margin: 0 auto;
border: 5px solid orange;
height: 100%;
display: flex;
flex-direction: column
}
.item-one {
border: 5px solid yellow;
margin: auto 0;
}
.item-two {
border: 5px solid red;
margin: 0 auto;
}
<div class="container">
<div class="item-one">Item One</div>
<div class="item-two">Item Two</div>
</div>