Flexbox-Höhe beinflussen

[delbor]

Hi Marc

Ich habe das Problem inzwischen lösen könne. Ausgangslage war ja, dass der Header viel zu gross war, wie es diese Seite auf Codepen zeigt.

Die Lösung fand ich in Form der Eigenschaft align-content.flexstart. Der Standartwert von align-content ist "stretch". Das bewirkt, dass sich die Flexitems einer Flexbox gleichmässig innerhalb derselben verteilen.

Meine Seite definiert neben dem body einen main-Abschnitt. Innerhalb dieses befindet sich der Header, der sich über die komplette Breite erstreckt. Unterhalb dieses Headers verteilen sich ein "article"-Element und zwei "aside"-Elemente entlang der Hauptachse den zur Verfügung stehenden Platz.

Ist nun align-content.stretch des Mainelements eingestellt, teilen sich der Header und die drei Elemente, die sich eine Zeile teilen (flexrow) den in der Höhe zur Verfügung stehende Platz. Dabei kann ein Flexcontainer wesentlich grösser werden, als sein Inhalt erfordern würde.

Setzt man nun den Wert von align-content auf flexstart, 'kleben' die Flexitems im Top ihres Containers oder der Vorhergehenden Zeile. Gleichzeitig passt sich jetzt das Flexitem an die Ausmasse ihres Inhalts an. Bei mir bewirkte das, dass der Header nur noch so hoch ist, wie es sein Inhalt erfordert. Gleichzeitig ordnen sich nun das "article"-Element und die zwei "aside"-Elemente wie gewollt unterhalb des Headers an. Das Resultat sieht man hier...

Noch ist der Footer viel zu gross. Dies darum, weil er sich zusammen mit dem main-Element den Raum des bodys teilt und dessen align-content-Wert immer noch stretch ist. Der jetzt noch sichtbare Leerraum oberhalb des Footers wird automatisch verschwinden, sobald ich den vorgegsehenen Inhalt (Bilder) einfüge.

Der Footer ist zwischen den Ende-Tags von main und body platziert.

Gruss

Delbor