Flexbox/Höhe?

[Franz]

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"?

Nein. Mein Fehler war alle items in eine Flexbox zu legen. Inzwischen habe ich das so gelöst, daß ich eine verschachtelte Flexbox gestalte (header, Inhalt, footer) und den Inhalt wiederum als Flexbox (Navigation, Section). Somit habe ich weniger Probleme.

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.

Genau das tun sie ja nicht sondern es ist ein Leerraum zwischen header und restlichen items. Ich hatte ja in anderen Fällen auch der Flexbox eine feste Höhe bzw. Breite gegeben und mit "space-between" wurde der Leerraum aufgeteilt. Wenn ich die Höhe bei Body entferne dann fügen sich die nächsten items an den header an aber einen Zwischenraum wie bei justify: space-between bzw. ein align-items: flex-end geht dann ja nicht da es nur die niedrigeren items verschiebt; das höchste item bleibt am header kleben. Bleibt dann nur ein margin um zwischen den vertikalen items einen Leerraum zu schaffen.

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.

Genau das ist ja nicht erwünscht. Bei "direction: row" und einer fixen Breite der Flexbox ordnen sich die items automatisch am Anfang nacheinander an. Mit "justify: space-around" wird der restliche Leerraum aufgeteilt. Mein Denkfehler scheint hier einerseits die Anordnung "row" und gleichzeitig durch den Zeilenumbruch "column" zu sein. Bei vertikaler Verteilung muß man anscheinend etwas umdenken.

LG Franz