Die CSS3 Eigenschaft Flexbox – Einleitung

Worum geht es? Was kann Flexbox:

Heutige Website-Layouts basieren auf Floats und Clearings um ein Layout den Anforderungen, ähnlich dem des Print-Layout, gerecht zu werden.

In Zukunft wird dies Flexbox übernehmen. Ich möchte hier nur eine kurze Einführung in die Thematik geben und Anregung schaffen, sein Wissen zu erweitern und zu verfestigen. Was früher Tabellen waren, auf denen das Layout einer Website basierte, ist heute die Herangehensweise mit Floats, Margins und Clearings. Jedoch wird Flexbox viele neue und interessante Lösungen im Webdesign schaffen.

Flexbox an sich ist ein Wert der CSS Eigenschaft display. Erst wenn ein Container oder HTML-Element die Eigenschaft display:flex; oder display:inline-flex; besitzt, können auch die weiteren Eigenschaften, wie unten aufgezählt, benutzt werden. Ich beschränke mich in diesen Artikel auf die Eigenschaft order.

Eigenschaften von Flexbox aufgelistet:

  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content
  • order
  • align-self
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex

Eine sehr gute und umfangreiche Erklärung der einzelnen Eigenschaften, mit Beispielen, gibt es in diesen Artikel bei den codrops.

Die Eigenschaft order:(zahl); am Beispiel erklärt:

Mit heutigen Mitteln ist es sehr umständlich den Content vor der Navigation im Markup zu stellen, da sich die Navigation oberhalb des Content befindet. Wie hier angedeutet zu sehen ist:

Standard-Layout-Website ohne Flexbox
Standard-Layout-Website ohne Flexbox

Das HTML sieht so aus:

Ich will aber ein Markup haben, in dem der Content vor der Navigation im HTML steht. Hier das HTML:

Dazu kommt folgendes CSS zum Einsatz:

Im Browser sieht das Ganze folgendermaßen aus:

Standard-Layout-Website mit Flexbox
Standard-Layout-Website mit Flexbox

Negative Werte sind auch möglich. Um so geringer ein Wert ist, um so weiter vorne ist das Element in der Ordnung.

Browsersupport:

Browsersupport von Flexbox
Browsersupport von Flexbox

Weitere Browser auf Can I Use It?

Leider wird es noch eine Weile dauern, bis man die Eigenschaften gefahrlos benutzen kann. Hier macht der Internet Explorer wieder einmal seinen schlechten Ruf alle Ehre. Wer auf IE 8 und 9 verzichten kann, sollte die Gelegenheit jedoch nutzen.

Artikel und Tools:

Um Flexbox besser verstehen zu können, empfehle ich folgende Website: flexbox in 5 minutes. Nehmt euch aber mehr Zeit als 5 Minuten 😉

Wenn man die Grundlagen verstanden hat, die die Website vermitteln will, kann man sich an folgendem Spiel austoben: Flexbox Froggy – Die Übungen gibt es auch auf Deutsch.

Auch ein gutes Spielzeug, um in die Materie einzutauchen, ist der sehr umfangreiche Flexbox playground auf Codepen

Anschließend noch einige Artikel, die ich für diesen hier verwendet habe als Quelle und Inspiration:

Fragen und Anregungen lasst es mich bitte in den Kommentaren wissen! Happy Coding 🙂

Tagged:

Autor Christoph Schade

Ich bin der Initiator von risosstudioDE. Seit 2009 liebe ich es, mit Webtechnologien zu spielen und bin seit 2014 als selbstständiger Webdesigner und Webdeveloper in Halle Saale tätig. Immer auf der Suche nach neuen Kontakten. Folge mir auf Twitter oder Facebook

Alle Artikel des Autors

Schreibe einen Kommentar

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