Flexboxen

[delbor]

Hi zusammen

Zuallererst - ich habe eine neue Version des Quelltextes auf Codepen hochgeladen.

Ich hänge diesen Thread bewusst hier an, da ich im vorherigen Beitrag 2 jpegs anhängte, die die 2 kleinen Nav-Elemente mit und ohne aktivierter Sidebar des Browsers und damit mit etwas unterschiedlichen Viewportgrössen zeigen - einmal lagen sie übereinander und dann (ohne Sidebar) ziemlich gestaucht untereinander. Die bisherige Lösung: Die 2 kleinen Nas sind Kinder eines Section-Elementes,und diesem habe ich eine align-items-Klasse verpasst(".verteilt2"). Etwas störend empfinde ich eigentlich nur noch die unterschiedlichen Breiten der 2 linken im Vergleich mit dem rechten NAV, denke aber, dies lösen zu können, indem ich um das linke Section- und das rechte Nav-Element eine weitere Flexbox lege, die ihren beiden Kindern gleich viel Platz einräumt.

Zu meinem andern Problem, den unerklärlichen Abständen zwischen den 3 Zeilen Begrüssungstext, gibt es zwei Besonderheiten: Das Markup im Header besteht im Grunde aus gerade mal 3 Zeilen. Dieses habe ich mal verdoppelt, wobei die eine Hälfte auskommentiert ist. Durch verschieben der Kommentarzeichen ergibt sich ein ganz anderes Erscheinungsbild. Die zweite Besonderheit ist: ich habe dem Header eine klare Höhe zugewiesen, und zwar bewusst eine zu kleine. Das macht deutlich: zumindest der Text der 2. Zeile (roase.ch) ist nicht wirklich Teil des Blockes, der ihn umgibt/umgeben sollte. Das aber heisst auch, das alle drei Zeilen einer Margins-Definition unterliegen, die anderswo im Strukturbaum definiert ist. Wobei die ja durch meine Zuweisungen überschrieben werden sollte...

Gruss Delbor