Flexbox/Höhe?

[MrMurphy1]

Hallo

Die Überlegung ist, den "header" in die Flexbox miteinzubeziehen aber er soll an oberster Stelle zu stehen kommen. Das gleiche sollte mit dem "footer" passieren.
Sinnvoller scheint mir den header und footer nicht miteinzubeziehen, wodurch sie automatisch an den Anfang bzw. Ende kommen.

Das verstehe ich nicht. Meinst du eventuell einen "Sticky Footer"?

Woher und wodurch kommt dieser?

Durch das "Flex" von Flexbox, also dem flexiblen Verhalten.

Das ist zwar vorgegeben, aber für unerfahrene Nutzer nicht unbedingt nachvollziehbar.

In deinem Beispiel passiert folgendes:

Du gibst dem body eine feste Höhe. Die drei innenliegenden Container stehen nebeneinander und füllen diese Höhe nicht komplett aus, es entsteht Leerraum. Entscheidend ist in deinem Beispiel der Leeraum unter dem höchsten der drei Container.

Wenn der header 100% breit wird müssen die beiden anderen Container in die nächste Zeile rutschen.

Im Flexboxmodell wird in diesem Fall der Leerraum zwischen den beiden jetzt vorhandenen Zeilen aufgeteilt. Und zwar gleichmäßig in Differenz der beiden höchsten Boxen jeder Zeile.

Bei drei Zeilen würde der ursprüngliche Leerraum entsprechend gedrittelt werden. Und so weiter.

Gruss

MrMurphy