Flexbox | Die eierlegende Wollmilchsau?

[heinetz]

Hallo Forum,

ich habe vor 17 Jahren Designs mit Tabellen umgesetzt. Später habe ich irgendwann gelernt, dass man keine Tabellen mehr benutzen soll und mich in das nicht einfach Box-Modell eingearbeitet, um alles in DIVs abzubilden und heute kann man angeblich alles endlich mit der Flexbox lösen. Um herauszufinden, was da dran ist, will ich nun endlich anfangen, sie einzusetzen.

Meine erste Frage:

Das Design für meinen Footer habe ich grob als Hypertext umgesetzt. Grundsätzlich unterteilt er sich in drei Zeilen (.o-footer__top, .o-footer__center, .o-footer__bottom). Der umschliessende Container (.l-grid-container__grid) hat die Eigenschaft display:flex. Ich kann diesen Container nicht beeinflussen. Die direkten Nachfahren (.o-footer__top, .o-footer__center, .o-footer__bottom) werden also erst einmal nebeneinander dargestellt (Codepen). Um zu erreichen, dass sie untereinander dargestellt werden, würde ich allen width:100% mitgeben (Codepen).

Das funktioniert aber macht es Sinn/Gibt eine saubere Lösung?

danke für Tipps und beste gruesse, heinetz

[MrMurphy1]

Hallo

aber macht es Sinn

Nein. Wenn HTML-Elemente sich bereits ohne CSS-Angaben wie gewüscht verhalten ist es unsinnig unnötige CSS-Regel einzubringen.

Wie jede andere CSS-Regel sollte auch Flexbox nur dort verwendet werden wo es erforderlich ist.

Gruss

MrMurphy

[heinetz]

Hallo,

aber macht es Sinn

Nein. Wenn HTML-Elemente sich bereits ohne CSS-Angaben wie gewüscht verhalten ist es unsinnig unnötige CSS-Regel einzubringen.

Ok, das verstehe ich als Grundsatz. Aber auf meinen konkreten Fall bezogen:

Der Container hat die Eigenschaft display:flex und das kann ich nicht ändern. Deshalb werden die Nachfahren nebeneinander dargestellt. Sie sollen aber untereinander dargestellt werden. Wie löse ich das sinnvoll wenn ich auf den Container keinen Einfluss nehmen kann?

gruss, heinetz

[Gunnar Bittersmann]

@@heinetz

Der Container hat die Eigenschaft display:flex und das kann ich nicht ändern.

Wieso nicht? Wenn du ans CSS rankommst, kannst du das doch. Oder steht das Inline im style-Attribut?

Deshalb werden die Nachfahren nebeneinander dargestellt. Sie sollen aber untereinander dargestellt werden. Wie löse ich das sinnvoll wenn ich auf den Container keinen Einfluss nehmen kann?

☞ A Complete Guide to Flexbox

LLAP 🖖

[heinetz]

@@Gunnar Bittersmann

Wieso nicht? Wenn du ans CSS rankommst, kannst du das doch. Oder steht das Inline im style-Attribut?

Ich habe den Container nicht gebaut und gehe davon aus, dass er noch an anderer Stelle verwendet. Ich kann lediglich Markup und CSS innerhalb des Containers verändern.

gruss, heinetz

[heinetz]

@@Gunnar Bittersmann

Da sich hier abzeichnet, dass der Container bzw. dessen Eigenschaft display:flex nicht sinnvoll ist, habe ich mich dazu entschlossen, dem die Eigenschaft flex-direction: column; anzudichten. Damit habe ich mein Problem vorerst gelöst.

Danke für die Auseinandersetzung!

[Gunnar Bittersmann]

@@heinetz

… und heute kann man angeblich alles endlich mit der Flexbox lösen.

Nein, nicht alles. Flexbox ist (wie der Name unschwer vermuten lässt) für flexible Boxen – in eine Richtung gestapelt oder nebeneinander. Mit flex-wrap: wrap(-reverse) auch als geschlängelt.

Für ein Grid in zwei Richtungen ist Flexbox aber nicht gedacht und nur bestenfalls ein Hack. Dafür gibt es CSS Grid.

LLAP 🖖

[Rolf B]

Hallo heinetz,

eine Flexbox brauchst Du da nur, wenn der Footer eine variable Höhe haben soll und die Einträge darin sich automatisch anpassen sollen. Das scheint hier nicht der Fall zu sein. Wenn es Dir nur darum geht, zwischen den Farbstreifen des Footers keine Lücken zu haben, in denen die Hintergrundfarbe des Footer durchscheint, dann gib den .center und .bottom Bereichen einen Blockformatierungs-Kontext. Das geht klassisch mit overflow:hidden, im Kommen ist auch display: flow-root (derzeit nur FF+Chrome). Dadurch bleiben die Margins der p und ul Elemente innerhalb des Bereichs, statt darüber hinaus zu laufen.

Aber mal ANGENOMMEN, flexbox würde Sinn ergeben. Dann wäre dein CSS in folgenden Punkten optimierungsfähig:

• Geh zur nächsten Webotheke und besorge Dir Semantin Forte, das hilft wirksam gegen Divitis.

  • Das heißt: Freunde dich mit semantischem Markup an. Verwende statt div class='o-footer' das footer Element.
  • Darin setzt Du mit h2 eine Überschrift, wenn's denn sein muss (aber nicht h1, weil die eigentlich nur einmal auf der Seite sein soll). Für die Überschrift brauchst Du keinen weiteren Container, das h2 Element kann für sich stehen. Du musst nur mit margin:0 und padding: 1em 0 (oder so) dafür sorgen, dass es vollständig gefüllt ist - wenn das denn sein muss.
  • Für center und bottom nimmst Du sections. Die kannst Du mit Klassen identifizieren, oder im css mit :nth-of-type(1) / :nth-of-type(2) ansprechen. WENN Du Klassen nimmst, dann nicht center und bottom, sondern benenne sie nach dem Sachzusammenhang.

• Deine Breitenakrobatik wirst Du los, wenn Du flex-wrap:wrap durch flex-direction:column ersetzt.

Ob Du überhaupt einen Container brauchst, außer dem footer selbst, hängt von deinen Anforderungen an die Farbgebung ab. Wenn der Footer eine andere Hintergrundfarbe haben soll als der Body und diese Farbe über die ganze Viewportbreite gehen soll, dann brauchst Du EINEN Container innerhalb des Footer. Diesen Container ernennst Du zur Flexbox. Wenn der Footer die Hintergrundfarbe des Body haben kann, machst Du den footer zur Flexbox und gibst ihm den zentrierenden Margin sowie die max-width.

Es könnte auch sinnvoll sein, max-width: 82em und margin: 0 auto; an den Body zu legen, um die komplette Seitenbreite zu limitieren. Dann brauchst Du Dich auf header/main/footer Ebene damit nicht zu befassen. Aber wie gesagt, das hängt von deinen Wünschen zur Farbgebung ab.

Ich habe mal - ohne Flex - so gemacht: https://jsfiddle.net/Rolf_b/41n4p45r/

Rolf