Webkrauts Logo

Webkrauts Webkrauts Schriftzug

- für mehr Qualität im Web

Flexbox light – das neue Layoutprinzip schon heute anwenden

Modernes Layout mit CSS

Flexbox light – das neue Layoutprinzip schon heute anwenden

Flexbox ist eine interessante neue CSS-Technik, mit der Webworker einfacher Inhalte in einem Layout anordnen können. Dabei können sie auch Elemente unabhängig von der Codereihenfolge sortieren. Leider ist die Verbreitung dieser Technik nicht besonders groß. Einfaches Umsortieren kann aber mit einem einfachen Trick schon heute realisiert werden.

Im Juni letzten Jahres veröffentlichte Ian Devlin einen Vorschlag, wie man mittels der Display-Eigenschaft die Darstellungsreihenfolge einer Webseite entscheidend beeinflussen kann. Diese Technik ist sozusagen »Flexbox light«, weil sie in die Richtung der mächtigen Technik Flexbox weist. Diese wird glücklicherweise immer besser implementiert. Aber leider gibt es keinen Fallback-Zustand und auch kein Polyfill, weshalb wir Flexbox sicherlich erst in vier oder fünf Jahren flächendeckend werden einsetzen können.

Bis dahin können allerdings im kleinen Maßstab Webseiten mit einfachen Mitteln für kleine Bildschirme umarrangiert werden. Meine Beispielseite bei Codepen zeigt das Grundprinzip an einem Zweispalter. Das Beispiel wurde mit YAML aufgebaut. Die meisten CSS-Regeln stecken deshalb in externen Dateien. Auch die Inhalte stecken in separaten Pens, die man bei dieser Testumgebung inkludieren kann.

Ein Beispiellayout in breiter Darstellung, die rechte Spalte floatet
Das Beispiellayout in voller Breite, zweispaltig

Die Contentspalte kommt am Ende des Codes, weil sie flexibel in der Breite ist. Die Seitenspalte mit den nebensächlichen Inhalten (die im Zweifel allerdings die Kohle bringt) kommt als erstes im Code und floatet nach rechts. Es soll nun dafür gesorgt werden, dass der Inhalt auf einem schmalen Bildschirm vor der Werbung und den weiterführenden Links kommt. Im Beispiel kommt Ians Idee bei einem Breakpoint von 720px Maximalbreite zum Zuge:

  1. @media only screen and (max-width: 720px){
  2. /* vorher floatende Seitenspalte */
  3.         .ym-col1 {
  4.         float: none;
  5.         width: 100%;
  6.         display: table-footer-group;
  7.         }
  8. /* statische Inhaltsspalte */
  9.         .ym-col3 {
  10.         margin-right: 0;
  11.         width: 100%;
  12.         }
  13. }
Ein Beispiellayout in schmaler Darstellung, die vorher rechte Seitenspalte hängt nun nach dem Ende des Inhalts
Das linearisierte Beispiellayout mit der zweiten Spalte am Ende der Seite

Die floatende Seitenspalte wird »entfloatet« und bekommt eine neue Display-Eigenschaft: display: table-footer-group;.
Die umgebenden Container werden vom Browser automatisch zu einer neuen Tabelle umdefiniert. Und da in dieser die table-footer-group am Ende der Darstellung ist, wird der Inhalt nun am Ende der neu implizit gedachten Tabelle platziert. Es ist wichtig, dass das nicht automatisch das Ende der Seite ist. Die Unterstützung von display: table reicht bis runter zum IE8. Es ist doch einen Versuch beim nächsten Projekt wert, in dem die Sourceorder für die Darstellung auf kleinen Bildschirmen unpassend ist.

Kommentare

rai
am 18.02.2014 - 08:49

Soweit ich weiß, gibt es ein Polyfill für das Flexbox-Modell...
http://flexiejs.com/
Habe es bereits getetest und funktioniert (auch im IE)

Permanenter Link
Jens Grochtdreis

Jens Grochtdreis (Autor)
am 18.02.2014 - 09:34

Für größere Flexbox-Orgien mag das hilfreich sein. Allerdings widerstrebt es mir, mein Layout auf JavaScript aufzubauen. Für kleine Umsortierungen - nur darum geht es in dem Artikel - benötigen wir aber nicht unbedingt JavaScript und können den hier vorgestellten Trick anwenden.

Permanenter Link

rai
am 24.04.2014 - 11:33

Ich sehe das mit Javascript genauso, ich verwende es nur falls nötig oder um ältere Browser zu supporten (IE). Wieso ich diesen Kommentar verfasst habe, war der Hinweis das es für Flexbox ein Polyfill gibt. Im Artikel wurde erwähnt "Aber leider gibt es keinen Fallback-Zustand und auch kein Polyfill,", soll jetzt nicht kleinlich sein, aber eventuell eine Hilfe um auch jetzt schon Flexbox zu verwenden bzw. ältere Browser zu unterstützen.

Permanenter Link
Jens Grochtdreis

Jens Grochtdreis (Autor)
am 24.04.2014 - 11:52

Und wärst Du auch so nett, uns den Polyfill mitzuteilen? Wenn Du Flexie meinst, den habe ich noch nicht getestet, hatte aber beim Lesen der Beschreibung meine Zweifel, dass es wirklich ein echter Polyfill ist. Sonst finde ich auf keiner der gängigen Infoseiten einen Hinweis auf einen funktionierenden Polyfill. Es geht nicht darum, die alte Schreibweise auf die neue aufzubrezeln, sondern bspw. den IE8 oder IE9 in die Lage zu versetzen, Flexbox zu verstehen.

Permanenter Link

Monika
am 19.02.2014 - 10:50

Danke dir für diese Idee der kleineren Umgruppierungen auf kleinen Devices.
Ich hatte dies noch nicht in meinem "Lösungsradar". :-) Aber es fallen mir nun etliche Möglichkeiten ein "Footerboxen" zu gruppieren.

Den Inhalt würde ich aber weiterhin niemals nach der Sidebar in den Quellcode tun.

Permanenter Link

Bernhard
am 03.03.2014 - 14:13

Also aus deinen Screenshots geht leider überhaupt nicht hervor, was genau deine Anweisung bewirkt. Die Texte im zweiten Screenshot sind im ersten nicht zu finden. So ist es für den Leser nicht wirklich nachvollziehbar, wie deine Flexbox-Lösung funktioniert.

Permanenter Link
Nicolai Schwarz

Nicolai Schwarz (Webkraut)
am 03.03.2014 - 14:54

Ok, die Screenshots zeigen nicht alles. Aber es ist ja insbesondere die Beispielseite in Codepen verlinkt. Da kannst du konkret nachvollziehen, was sich ändert.

Permanenter Link

Bernhard
am 05.03.2014 - 14:36

Ich finde das Beispiel noch immer nicht wirklich gut geeignet für die Veranschaulichung von Flexbox. Die Sidebar hätte gleich von vor herein als zweites im Code kommen sollen, schon alleine aus SEO Gründen. Ich hätte eher ein Beispiel gewählt, bei den sich ein Teil der Content Spalte von der Position her verschiebt.

Permanenter Link

Manuel
am 23.03.2014 - 12:35

Bernhard ich sehe das genau so wie du.
Der Aufbau ist aus SEO-Sicht absolut sinnlos. Dass das Aside-Element vor dem Content kommt, ist für mich nicht nachvollziehbar. Generell finde ich die Templates für SEO-Zwecke nicht gut. Da gibt es noch einiges zu optimieren.
Was da Flexbox soll, sehe ich auch nicht ganz. Zudem das Ergebnis ohne Weiteres auch mit nem Clearfloat oder anders erzielt werden kann.

Flexbox mag gerade deswegen sinnvoll sein, dass die Auslieferung einer Website wirklich als erstes den Content, und so weiter aufbaubar wäre. Daher ist wohl ein Eingreifen durch JavaScript unumgänglich.
Aber immer auf dem aktuellen Stand zu bleiben, wie Google seine Inhalte braucht. Da muss man schon fit sein. Ist ja nicht nur der Aufbau als solches.

Permanenter Link

Bernhard
am 07.04.2014 - 17:40

Ich sage ja nicht, dass Flexbox gerenell keine Bereichtigung hat. Es ist durchaus sinnvoll um Inhalt innerhalb des eigentlichen Seiteninhalt umzusortieren. Aber es sollte nicht verwendet werden, um die Sidebar, die vor dem Content kommt, mit diesem zu tauschen.

Aus Google Sicht sollte immer das zuerst kommen, was auch der Nutzer zuerst sehen möchte. Manchmal kann man dann die eigentliche Darstellung mit absoluter oder fixer Positionierung ändern, aber manchmal hilft eben nur so etwas wie Flexbox.

Auf der Seite von CSS-Tricks sieht man dazu ein sehr gutes Beispiel. Hier hat eine Seite zwei Sidebars, eine links und eine rechts des Inhalts. Im Quellcode stehen diese beiden unter dem Content, also genau so, wie es auch sein soll. Auf der Desktop-Breite sind sie links und rechts vom Inhalt positioniert und haben dennoch keine feste Breite. Also etwas, dass mit abolsuter Positionierung nicht möglich wäre (flexible Breite). Auf der Tablet-Breite sind sie dann unter dem Inhalt nebeneinander ausgerichtet und auf Smartphone-Breite beider unter dem Inhalt mit voller Breite.

In diesem Beispiel sieht man sehr viel besser, was der Nutzen hinter Flexbox ist und wieso es auch in Zusammenhang mit Sidebars oft eingesetzt wird. Aber eben in diesem Fall auf der richtigen Basis, mit dem Content ganz oben.

Permanenter Link

Florence
am 31.03.2014 - 17:17

Praktisch, diese Umsortierung.
Kleiner Tipp am Rande, weil ich gerade damit zu kämpfen hatte: padding wirkt sich bei display: table-header-group und display: table-footer-group nicht aus. (http://maurice-web.de/padding-bei-table-header-group-und-table-footer-gr...)

Permanenter Link

Benjamin A.
am 10.06.2014 - 16:06

Also das hört sich echt cool an. Das muss ich gleich mal mit meinem Programmiere durchgehen. :)

Ich werde Bericht erstatten.

Permanenter Link

Die Kommentare sind geschlossen.