Kategorien
CSS

Flexbox ist nicht schwer

Wer von euch kennt eigentlich Flexbox? Also nicht nur den Namen, sondern auch, wie man Flexbox anwendet? In den letzten Jahren lag der Fokus in Sachen CSS viel auf CSS Grid. Endlich zweidimensional Layouts gestalten, was vorher nur mit mehr oder minder schmutzigen Tricks möglich war. Aber auch in der eindimensionalen Welt haben wir seit vielen Jahren die Möglichkeit mit Flexbox zu arbeiten und ich persönlich möchte das überhaupt gar nicht mehr missen!

Vorhin hatte mich Torsten auf Twitter gefragt, ob er da so eine richtige Lösung mit Flexbox für sein Projekt gefunden hatte:

Hier klicken, um den Inhalt von Twitter anzuzeigen

Da das im Projekt eingesetzte Divi leider ein sehr verschachteltes Menü zur Verfügung stellt, sieht das CSS auch recht kompliziert aus. Torsten hat das aber soweit richtig umgesetzt, sodass es mit der Menüstruktur passt. 👍

Die besten Ressourcen

Weil Torsten in seinem Blogbeitrag schreibt, dass er in Sachen Flexbox noch nicht so fit ist, brachte mich das auf die Idee für den heutigen Blogbeitrag. Für mich gibt es zwei wichtige Seiten, die ich für den Einstieg richtig gut finde. Oder weil ich mir immer noch nicht merken kann, welche Eigenschaft ich für den bestimmten Anwendungsfall nutzen muss – ja, ich schaue auch immer wieder Sachen nach und lerne sie nicht auswendig. Ich weiß ja, wo sie stehen. 🤓

A Complete Guide to Flexbox von CSS-Tricks ist für mich die Anlaufstelle, wenn ich mal wieder die Eigenschaften vergessen habe. Die Aufteilung zwischen Eigenschaften für das Container-Element und die Kind-Elemente macht das Ganze übersichtlich. Außerdem sind fast alle Eigenschaften mit Schaubildern versehen, die die Funktionsweise visuell zusätzlich noch erklären. Unter „Other Ressources“ gibt es noch ein paar hilfreiche Links zur Spezifikation, MDN Docs und weiteren Artikeln.

Von Flexbox Froggy werden die meisten hoffentlich auch schon mal gehört haben. Das ist ein kleines Spiel, mit dem man die Eigenschaften von Flexbox etwas besser kennenlernen kann. Ziel ist es, den Frosch bzw. die Frösche auf die Seerosenblätter zu positionieren, um das Level abzuschließen. Dazu muss die fehlende Flexbox-Eigenschaft ins Feld eingetragen werden. So kann man ganz gut ein Gefühl dafür bekommen, welche Eigenschaft eigentlich was auslöst.

Bei der Recherche habe ich eben noch diesen tollen CodePen gefunden, bei dem die einzelnen Eigenschaften per Radio-Buttons geändert werden können. Quasi eine interaktive Erweiterung zum CSS-Tricks-Artikel.

Wo ich regelmäßig Flexbox in WordPress Themes einsetze

Viele Themes bringen heute schon Elemente mit sich, die mit Flexbox umgesetzt sind. Die typischen Klassiker, die auch von mir manchmal noch „flexifiziert“ werden, wenn sie es nicht schon sind:

  • Header-Bereich, meist Logo und Navigation
  • Navigation im Header in der Desktop-Ansicht
  • Artikel in einer Blogpost-Übersicht bzw. -Archiv
  • Widget-Areas vor dem Footer
  • Footer-Bereich

Als generelles Schema setze ich Flexbox immer dann ein, wenn ich mehrere Elemente in einem Container nebeneinander bzw. im Falle der Artikel in der Blogpost-Übersicht untereinander ausrichten möchte. Einfach weil es so unkompliziert und in allen gängigen, modernen Browsern unterstützt wird. Mit Prefix sogar noch in IE 10 und 11.

Vielleicht stelle ich mal in einem kommenden Blogbeitrag ein paar Standard-Beispiele zusammen, wie man mit Flexbox das von WordPress vorgegebene HTML stylen kann. Interesse? 🙂

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.