Vertically justify content
Yep, flexbox is the simplest way to do it.
On the container element:
.container {
display: flex;
flex-direction: column;
justify-content: space-between;
}
On the child elements:
.container div {
flex: 1;
width: 100%
}
For the spacing between the elements, just add padding to the container and bottom margins to the children.
The style would look like this:
.container {
/* Same as above, and */
padding: 20px;
}
.container div {
/* Same as above, and */
margin-bottom: 20px;
}
.container div:last-of-type{
margin-bottom: 0;
/* So that spacing is even at bottom and top of container */
}
(I was typing this when you posted your answer, so I put it up anyway)
Fiddle