Align divs at the bottom right above each other - css

Question

How I can align bottom many divs, one on another. Like on a picture below.

Answer 1

You can use Flexbox to do this
Set flex-direction: column to position divs one on top of another
align-items: flex-end to move divs to right side of parent
justify-content: flex-end to move divs to bottom of parent.
.parent {
height: 300px;
width: 200px;
border: 1px solid black;
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: flex-end;
}
.box {
width: 100px;
height: 50px;
margin: 5px;
border: 1px solid black;
}
<div class="parent">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
Update: To reverse order of divs you can use flex-direction: column-reverse and justify-content: flex-start
.parent {
height: 300px;
width: 200px;
border: 1px solid black;
display: flex;
flex-direction: column-reverse;
align-items: flex-end;
justify-content: flex-start;
}
.box {
width: 100px;
height: 50px;
margin: 5px;
border: 1px solid black;
}
<div class="parent">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>

Answer 2

You can use flexbox with flex-direction: column-reverse; and flex-wrap: wrap-reverse;:
.x {
width: 500px;
height: 500px;
display: flex;
flex-direction: column-reverse;
flex-wrap: wrap-reverse;
border: 1px solid red;
flex-grow: 0;
flex-basis: 0%;
}
.y {
width: 80px;
height: 80px;
border: 1px solid green;
margin: 3px;
}
<div class="x">
<div class="y">1</div>
<div class="y">2</div>
<div class="y">3</div>
<div class="y">4</div>
<div class="y">5</div>
</div>