The answer is
CSS3 flexbox can also be used to align button at the bottom of parent element.
Required HTML:
<div class="container">
<div class="btn-holder">
<button type="button">Click</button>
</div>
</div>
Necessary CSS:
.container {
justify-content: space-between;
flex-direction: column;
height: 100vh;
display: flex;
}
.container .btn-holder {
justify-content: flex-end;
display: flex;
}
Screenshot:
Useful Resources:
_x000D_
_x000D_
_x000D_
_x000D_
* {box-sizing: border-box;}_x000D_
body {_x000D_
background: linear-gradient(orange, yellow);_x000D_
font: 14px/18px Arial, sans-serif;_x000D_
margin: 0;_x000D_
}_x000D_
.container {_x000D_
justify-content: space-between;_x000D_
flex-direction: column;_x000D_
height: 100vh;_x000D_
display: flex;_x000D_
padding: 10px;_x000D_
}_x000D_
.container .btn-holder {_x000D_
justify-content: flex-end;_x000D_
display: flex;_x000D_
}_x000D_
.container .btn-holder button {_x000D_
padding: 10px 25px;_x000D_
background: blue;_x000D_
font-size: 16px;_x000D_
border: none;_x000D_
color: #fff;_x000D_
}<div class="container">_x000D_
<p>Lorem ip sum dolor sit amet... Lorem ip sum dolor sit amet... Lorem ip sum dolor sit amet... Lorem ip sum dolor sit amet... Lorem ip sum dolor sit amet... Lorem ip sum dolor sit amet... Lorem ip sum dolor sit amet... Lorem ip sum dolor sit amet... Lorem ip sum dolor sit amet... Lorem ip sum dolor sit amet... </p>_x000D_
<div class="btn-holder">_x000D_
<button type="button">Click</button>_x000D_
</div>_x000D_
</div>Parent container has to have this:
position: relative;
Button itself has to have this:
position: relative;
bottom: 20px;
right: 20px;
or whatever you like
Goes to the right and can be used the same way for the left
.yourComponent
{
float: right;
bottom: 0;
}
Source: Stackoverflow.com