[QUESTION]:How to make a custom block always be at the bottom of the page

for ur case align every block at end, use (  align-content: flex-end; ) in body or parents element
<pre>
&lt;body class="flex-container flex-end"&gt;
  &lt;div class="flex-item"&gt;1&lt;/div&gt
  &lt;div class="flex-item"&gt;2&lt;/div&gt
  &lt;div class="flex-item"&gt;3&lt;/div&gt
  &lt;div class="flex-item"&gt;4&lt;/div&gt
  &lt;div class="flex-item"&gt;5&lt;/div&gt
  &lt;div class="flex-item"&gt;6&lt;/div&gt
&lt;/body&gt

html, body {
  height: 100%;
}
.flex-container {
  float: left;
  width: 100%;
  height: 100%;
  border: 1px solid silver;
  
  -ms-box-orient: horizontal;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
  
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
}

.flex-end { 
  align-content: flex-end; 
}

.flex-item {
  width: 100%;
  background: red;
}
</pre>