In diesem Beispiel gibt es nur einen flexcontainer und darin liegen die flexitems. Das erste Flexitem ist ein div mit Schrift "CSS3 Flex". Dieses wird im Gegesatz zu den Karteireitern vertikal mittig angeordnet.

Der Header muss eine Höhe bekommen, denn sonst kann man die divs mit den Karteireitern nicht unten anordnen. align-items: flex-end;

Alle flex-items im Header sind horizontal mit justify-content: space-around; angeordnet.

Es gibt einen Breakpoint bei max-width: 40em. Das ist der Punkt, wo die Karteireiterpunkte nicht mehr nebeneinanderliegen.

Dort wird die Höhe des headers auf auto gesetzt und eine Anordnung der flex-items in Spalten erzeugt.
flex-direction: column;