I am working with a flex container called .container and two flex items: item-one and item-two. My goal is to center the first item vertically and anchor the second item to the bottom.
Struggling to figure out how to vertically align the first item within this setup.
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;
}