Flexbox-Höhe beinflussen

[delbor]

Hi zusammen

Nachdem ich schon mal einen Thread zu Flexboxen eröffnet hatte, mache ich jetzt mal hier weiter, da es jetzt speziell um die Höhe von Flexboxen geht. Zurzeit arbeite ich an einer Vorlage für Fotoseiten. Die hat grundsätzlich den selben Aufbau wie die oben verlinkte Hauptseite, mit dem Unterschied, dass der Header eine wesentlich kleinere Höhe erhalten soll. Dabei befindet sich das Logo entsprechend verkleinert und ohne Willkommenstext in der linken Seite des Headers, während dessen restlicher Platz eine noch nicht realisierte horizontale Navigation aufnehmen soll. Auf Codepen befindet sich eine Version 2 der entsprechenden Seite. Beiden Versionen hab ich ein zusätzliches Main-Element verpasst, optisch am roten Rahmen erkennbar. Während in Version1 das Mainelement unmittelbar vom Body umschlossen wird, befindet sich in Version 2 (auf Codepen) zwischen den zwei einleitenden Tags des Body- und des Mainelements der Header.

Damit wollte ich ereichen, dass ich für das Body-Element mit "Flex-direction: column" die Hauptachse in Vertikale Richtung ändern konnte, während der Header, das Main- und das Footer-Element intern weiterhin auf "Flex-direction: row" gesetzt sein sollten. Meine Überlegung war, dass ich Die Elemente "Header" und "Footer" durch Zuweisung eines kleinen Wertes für Flex-grow in der Höhe beeinflussen könnte. Nur hat das irgendwie nicht geklappt. Die beiden genannten Elemente haben einen Flex-grow-Wert von 1. Dem Mainelement versuchte ich verschiedene höhere Werte zuzuweisen. Flexgrow 4 brachte gar nichts. Erst ein deutlich höherer Wert (ab 20) wirkte sich auf den Header aus, aber immer noch sehr unbefredigend. Also erhöhte ich den Wert weiter - mit dem Erolg, dass sich die Höhe des Headers zwar weiter verkleinerte, aber immer weniger, je höher ich den Flex-Grow-Wert des Mainelements setzte. Schliesslich brach ich die Übung beiFlexgrow: 150 ab... In der auf Codepen gezeigten Version hatder Header eie explizite Höhe, aber die anderen Elemnte rutschen nicht nach... Meine Frage ist: wie kann ich die Höhe eine r Flexbox beinflussen, ohne ihr explizit eine solche zuzuweisen?

Gruss Delbor

[Gunnar Bittersmann]

@@delbor

Auf Codepen befindet sich eine Version 2 der entsprechenden Seite.

        <Section>

Warum mir großem S? Und nein, section passt nicht auf die beiden Bereiche im Siteheader; div wäre angebracht, falls du da noch irgendwelche Container brauchst. Brauchst du aber vermutlich nicht.

    <article class="verteilt1">

Nein, article dienst nicht nur Auszeichnung des Hauptinhalts.

Anhand deiner Beschreibung wird mir nicht klar, was du eigentlich erreichen willst, d.h. wie es aussehen soll.

Den Text in Absätze aufzuteilen wäre der Lesbarkeit auch dienlich.

LLAP 🖖

[delbor]

Hi Gunnar

Warum mir großem S? Und nein, section passt nicht auf die beiden Bereiche im Siteheader; div wäre angebracht, falls du da noch irgendwelche Container brauchst. Brauchst du aber vermutlich nicht.

Ja, stimmt. Dem Firefox scheint das nicht zu stören. Aber es gibt ja noch andere Browser.

Nein, article dienst nicht nur Auszeichnung des Hauptinhalts.

Hab ich so aus dem Beispiel für dreispaltiges Flexlayout übernommen. Den Unterschied zwischen main, section und article kenne ich nicht. So per sse scheints keinen zu geben. Einzig nav scheint da etwas speziell zu sein.

Anhand deiner Beschreibung wird mir nicht klar, was du eigentlich erreichen willst, d.h. wie es aussehen soll.

Nun ja, die aside- und das article-Element sollen sich - bis auf die definierten margins - an den Header anschliessen. Der rutscht aber nach oben, wenn ich ihm eine geringere Höhe zuweise, und die andern Elemente rutschen nicht nach...

Ich kann ja auch mal Version1 hochladen, damitsichtbar wird, wie das ganze aussieht, wenn keine Höhen zugewiesen werden.

Den Text in Absätze aufzuteilen wäre der Lesbarkeit auch dienlich.

Damit hast du ganz klar recht. Ich mach das eigentlich ganz intuitiv. Aber manchmal wechsle ich nicht explizit in einen neuen Absatz (2x Enter), sondern nur in eine neue Zeile (einmal Enter). Und das scheint der Editor zu verschlucken. Jetzt, bevor ich gespeichert habe, zeigt mir die Vorschau die neue Zeile, die mit dem Wort "Jetzt" beginnt, nicht korrekt an. Das heisst, diese beiden Sätze beginnen im Editor in einer neuen Zeile,in der Vorschau und nach dem Speichern jedoch niccht mehr. Trotzdem lass ich das jetzt mal so stehen, so quasi als Korrekturanregung.

Gruss

Delbor

[delbor]

Hi zusammen

Hier noch die Version 1

Gruss

Delbor

[marctrix]

Hej delbor,

sicher gibt es eine Webseite, die so funktioniert, wie es auf deiner Webseite werden soll.

Schick doch mal einen link zu so einer Seite, damit wir wissen, was du erreichen möchtest.

Marc

[delbor]

Hi Marc

Leider fällt mir zur Zeit keine ein, obwohl ich einige wüsste, speziell auch Eisenbahnseiten. Und wenns sowas gibt, ist es möglicherweise noch nicht mit Flexboxen realisiert. Diese Technik ist ja noch nicht so alt...

Gruss

Delbor

[marctrix]

Hej delbor,

Leider fällt mir zur Zeit keine ein, obwohl ich einige wüsste, speziell auch Eisenbahnseiten. Und wenns sowas gibt, ist es möglicherweise noch nicht mit Flexboxen realisiert. Diese Technik ist ja noch nicht so alt...

Muss keine Flexbox sein, ich wollte nur verstehen, was du erreichen möchtest. Eine handgemalte Skizze wäre auch ok...

Marc

[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

[Gunnar Bittersmann]

@@delbor

Die Lösung fand ich in Form der Eigenschaft align-content.flexstart.

Nein, die Lösung wirst du in der Eigenschaft flex-grow finden. Bzw. in der Sammeleigenschaft flex.

Du hast dir die Beispiele auf der verlinkten CSS-Tricks-Seite angesehen? Anscheinend nicht. Warum nicht?

LLAP 🖖

[delbor]

Hi Gunnar

flex-grow verteilt Anteile in einer Zeile / entlang der Hauptachse. Genau das war ja eine meiner ersten Überlegungen. Und das ging gründlich schief.

Vergleiche doch mal die main-definitionen. Hier weise ich dem main-Element align-content:flexstart zu, hier aber nicht. Das Resultat unter dem 2. Link: der Header ist so hoch, wie es sein Inhalt erfordert.

Schau dir dazu bitte auch diese Seite an.

Doch, die von dir verlinkte seite hab ich mir - mehr als einmal - angesehen. Wenn du da etwas weiter nach unten scrollst, siehst du die grafischen Darstellungen zu align-content. Und da ist genau das dargestellt. Was die Grafiken nicht anzeigen, ist das verhalten der einzelnen Elemente,, bzw. deren Anpassung an ihren eigenen Inalt.

Gruss

Delbor

[Gunnar Bittersmann]

@@delbor

Vergleiche doch mal die main-definitionen.

Nein, so weit sind wir noch nicht.

Hier weise ich dem main-Element align-content:flexstart zu, hier aber nicht.

Und wo weist du der Flexbox body { flex-direction: column } zu? Du willst doch, dass sich die Flexitems untereinander anordnen‽

LLAP 🖖

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Und wo weist du der Flexbox body { flex-direction: column } zu? Du willst doch, dass sich die Flexitems untereinander anordnen‽

Und wo mache ich bei `body { flex-direction: column }`{: .language-css} einen Fehler? Ich will doch, dass flex-direction als Eigenschaft (also alle Buchstaben in gleicher Farbe!) angezeigt wird‽

Vermutlich nirgends. Der Syntax-Highlighter ist kaputt.

LLAP 🖖

[delbor]

Hi Gunnar

Nein, so weit sind wir noch nicht.

Ähh - wie weit sind wir noch nicht? Zur Erinnerung zitiere ich mich mal selbst:

Die hat grundsätzlich den selben Aufbau wie die oben verlinkte Hauptseite, mit dem Unterschied, dass der Header eine wesentlich kleinere Höhe erhalten soll. Dabei befindet sich das Logo entsprechend verkleinert und ohne Willkommenstext in der linken Seite des Headers, während dessen restlicher Platz eine noch nicht realisierte horizontale Navigation aufnehmen soll.

Das muss ein Missverständnis sein:

Und wo weist du der Flexbox body { flex-direction: column } zu? Du willst doch, dass sich die Flexitems untereinander anordnen‽

Bei genügend Breite, zum Bleistift auf einem "normalen" Bildschirm, soll der Header da sein, wonach er heisst: Im Kopfbereich der Seite. Aber er soll eben nicht so hoch sein, wie er bei "align-Content:stretch" wird.

Immer noch werden sämtliche Elemente untereinander angezeigt, wenn ich den Browser verschmälere.

Das Beispiel zum feststehenden Footer definiert - wenn ich mich recht erinnere - body.flexdirection.column. Das hat aber - zumindest hier - bei mir nicht funktioniert. Weswegen das so war, weiss ich allerdings nicht. Allerdings kommt mir jetzt der Gedanke, dass dies mit dem Standartwert von aligncontent (stretch) zusammenhängt.

Upps, da fällt mir was auf:

Du willst doch, dass sich die Flexitems untereinander anordnen‽

Das waren die beiden kleinen Navigationsboxen auf der Hauptseite, die sich bei genügender Breite erstmal nebeneinander anordneten. Das habe ich behoben, indem ich diese beiden navs in eine eigene Box packte.

Gruss

Delbor

[Matthias Apsel]

Hallo delbor,

Keine Korrekturanregung.

Markdown funktioniert so.

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@delbor

Warum mir großem S?

Ja, stimmt. Dem Firefox scheint das nicht zu stören. Aber es gibt ja noch andere Browser.

Keinen Browser stört das große S; HTML ist case-insensitiv (im Gegensatz zu XHTML, SVG u. a. XML).

Den Unterschied zwischen main, section und article kenne ich nicht. So per sse scheints keinen zu geben.

Doch. Die Elemente dienen zur semantischen (strukturellen) Auszeichnung verschiedener Inhalte. Dass sie visuell dasselbe tun – nämlich einen Block erzeugen – heißt nicht, dass man sie wahllos einsetzen darf.

LLAP 🖖

[MrMurphy1]

Hallo

Dir unterlaufen wohl zwei Mißverständnisse.

Höhenangaben in Webseiten

Auf Webseiten sollten Höhenangaben so weit irgendmöglich vermieden werden. Grade Anfänger ignorieren diese bewährte Grundregel gerne.

Grundsätzlich sollten Webseiten nur rauf und runter scrollbar sein. Seitliches Srollen wird von den meisten Usern abgelehnt. Bei einem möglichen Scrollen in beide Richtungen gleichzeitig ist es sehr schwer den Überblick zu behalten.

Deshalb nutzen Webseiten die Breite von Browserfenstern so weit wie möglich aus und der Inhalt passt sich in der Höhe der Fensterbreite an. Je schmaler ein Fenster ist desto höher wird die Webseite. Das Verhalten erwarten die Besucher und damit kommen sie gut zurecht.

Darauf basieren auch die teilweisen Unterschiede bei den width- und height-Angaben im CSS.

Fast jeder Eingriff durch Angabe einer Höhe stört dieses Verhalten und führt zu Problemen.

Anfänger machen häufig den Fehler, Webseiten gestalten zu wollen, die keinen oder nur sehr wenig Inhalt enthalten. Damit ihre Webseiten "besser" aussehen sollen sie trotzdem die gesamte Fensterhöhe ihres Desktop-Bildschirms ausfüllen. Das führt dazu Höhenangaben mißbräuchlich einzusetzen. Die fertigen Seiten haben in der Regel so viel Inhalt dass sie auch bei großen Bildschirmen deren gesamte Höhe ausfüllen.

Mit Höhenangaben sollen also meistens Darstellungsprobleme behoben werden, die es überhaupt nicht gibt. So wohl auch bei dir.

Flexbox

Die Hauptaufgabe von Flexbox ist Leerraum zu verteilen. Das geht aber nur wenn überhaupt welcher vorhanden ist.

Wie bereits beschrieben ist (und so soll es auch sein) in der Regel kein Leerraum in der Höhe vorhanden. Deshalb kann Flexbox auch keinen Leerraum verteilen.

Flexbox ist aber überhaupt nicht dafür gedacht die grundsätzliche Größe von Elementen zu bestimmten. Die flex-Angaben ermöglichen nur den Flexitems möglichen Leerraum zuzuweisen.

Gruss

MrMurphy

[Gunnar Bittersmann]

@@MrMurphy1

Anfänger machen häufig den Fehler, Webseiten gestalten zu wollen, die keinen oder nur sehr wenig Inhalt enthalten.

Das geht gar nicht. Ohne Inhalt kann man nicht gestalten, sondern lediglich dekorieren.

LLAP 🖖

[delbor]

Hi MrMurphy

Dir unterlaufen wohl zwei Mißverständnisse.

Wohl nicht nur zwei - aber das wird sich mit der Zeit geben.

Auf Webseiten sollten Höhenangaben so weit irgendmöglich vermieden werden. Grade Anfänger ignorieren diese bewährte Grundregel gerne.

Ich hab dieses Tutorial nachgebaut und anschliessend ein bisschen damit herumgespielt, um mir gewisse Sachen zu verdeutlichen. Das Tut verwendet keinerlei Höhenangaben und ich also auch nicht. Trotzdem snd die Boxen genau so gross, wie sie sein sollen.

Das bringt mich erstmal auf den Gedanken, dass sich Boxen in ihrer Höhe an ihren Inhalt anpassen - was so auch irgendwo steht, wenn mich nicht alles täuscht. Wieso tut dies aber mein Header nicht?

Während ich dies schreibe, kommt mir eine Idee: das Logo ist in einem div "#Titelbox2" definiert, und da sind with und margin in Prozent angegeben - in dem direkt übergeordneten Container (der Flexbox) jedoch nicht. Also holt sich der Browser die Bezugsgrösse woanders... Aber das müsste ich erst austesten.

Grundsätzlich sollten Webseiten nur rauf und runter scrollbar sein. Seitliches Srollen wird von den meisten Usern abgelehnt. Bei einem möglichen Scrollen in beide Richtungen gleichzeitig ist es sehr schwer den Überblick zu behalten.

Ich bin bis jetzt einmal einer Webseiten begegnet, die horizontal gescrollt werden musste - das ist schlicht fürchterlich...

Anfänger machen häufig den Fehler, Webseiten gestalten zu wollen, die keinen oder nur sehr wenig Inhalt enthalten. Damit ihre Webseiten "besser" aussehen sollen sie trotzdem die gesamte Fensterhöhe ihres Desktop-Bildschirms ausfüllen. Das führt dazu Höhenangaben mißbräuchlich einzusetzen. Die fertigen Seiten haben in der Regel so viel Inhalt dass sie auch bei großen Bildschirmen deren gesamte Höhe ausfüllen.

Mit Höhenangaben sollen also meistens Darstellungsprobleme behoben werden, die es überhaupt nicht gibt. So wohl auch bei dir.

Auf der Einstiegsseite befindet sich im mittigen article-Element die nach Rubriken aufgeteilte Navigation. Die nimmt in der Tat sehr wenig Platz ein. Die beiden Aside-Boxenlinks und rechts sind für iregendwelche Banner vorgesehen - nicht wirklich viele, um die Seite nicht zu überladen und den eigentlichen Inhalt nicht zu ersticken.

Ich hab auch das Tutorial zum feststehenden Footer nachgebaut - mit dem Resultat, dass der "feststehende Footer" unmittelbar unter der article- und den Asideboxen klebte. Dies hab ich behoben, indem ich in der article-Box mehrere Absätze <p>S</p> untereinander einfügte. Der Footer war zwar immer noch nicht feststehend, aber die Höhe ausreichend, dass die Seite vertikal geschrollt werden musste, um ihn sichtbar zu machen.

Mir ist einfach wichtig, dass die Seite den kompletten Viewport nutzt, auch wenn nicht genügend Inhalt da ist, um ihn zu füllen.

Die Hauptaufgabe von Flexbox ist Leerraum zu verteilen. Das geht aber nur wenn überhaupt welcher vorhanden ist.

Wie bereits beschrieben ist (und so soll es auch sein) in der Regel kein Leerraum in der Höhe vorhanden. Deshalb kann Flexbox auch keinen Leerraum verteilen.

Mmmhhh. In meinen beiden Versionen sind der Body und das darin enthaltene Main beides Flexboxen, sollten ihre Inhalte und die entstehenden Leerräume also optimal verteilen (was dazu führt, dass mein Header viel zu hoch ist, bzw. sich nach oben verkleinert, wenn ich ihm explizit Höhe zuweise).

Gruss

Delbor

[Gunnar Bittersmann]

@@delbor

Ich hab auch das Tutorial zum feststehenden Footer nachgebaut - mit dem Resultat, dass der "feststehende Footer" unmittelbar unter der article- und den Asideboxen klebte. Dies hab ich behoben, indem ich in der article-Box mehrere Absätze <p>S</p> untereinander einfügte.

Schon verkackt. ;-) Die Flexboxen, die sich ausdehnen sollen, müssen dies auch ohne Inhalt tun.

Mir ist einfach wichtig, dass die Seite den kompletten Viewport nutzt, auch wenn nicht genügend Inhalt da ist, um ihn zu füllen.

Du kennst Chris Coyiers Complete Guide to Flexbox? Nach der (wirklich guten) Erläuterung gibt’s auch dort Beispiele. Ich glaube, da solltest du fündig werden.

LLAP 🖖

[delbor]

Hi Gunnar

Ja, danke, die Seite kenne ich; ich hab sie auch in meinen Lesezeichen. Einzig meine fürchterlichen Englischkenntnisse bewegen mich immer dazu, erstmal deutschsprachige Seiten aufzurufen.

Trotzdem hat dein Link was sehr Gutes: Ich hab den mal angeklickt - und bin gleich gestolpert. Nämlich über align-items und stretch...

Mal kucken, was das bringt. Auf jeden Fall vielen Dank!

Wie war das doch gleich mit den vielen Bäumen und dem Wald, den man deswegen nicht mehr sieht? ;-))

Gruss

Delbor