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