Flexbox-Hilfe

Hast Du das CSS irgend wie durch einen Übersetzer gejagt? "Flex-Richtung" etc. gibt es natürlich nicht.

Der Grund dafür, dass das "justify-content" die Buttons nicht trennt, ist, dass es nur greift, wenn freier Raum vorhanden ist. Weil in dem div.buttons die Elemente direkt unter einander gepackt werden, ist das jedoch nicht der Fall. Weist Du diesem div eine Höhe zu, funktioniert das "space-between" sofort:

.buttons {
    display: flex;
    flex-direction: column;
    width: 5%;
    justify-content: space-between;
    height: 10em; /* <-- hier */
}

Zitat von Sempervivum

Weil in dem div.buttons die Elemente direkt unter einander gepackt werden, ist das jedoch nicht der Fall.

Auch wenn du es direkt im nächsten Satz vervollständigst, ist dieser Satz an sich etwas falsch formuliert.

Die Buttons (oder sonstige Element) werden NICHT nicht getrennt weil sie direkt untereinander gepackt sind, sondern weil das Elternelement keine (ausreichende) Höhe hat.