© Liashko/Shutterstock.com
Entwickler Magazin
Wissenswertes rund um Flexbox

Layout in flexibel

Wir schreiben das Jahr 2016 - der Flexbox-Standard ist in den Browsern angekommen. Doch wie genau funktioniert das alles, und wann lohnt sich der Einsatz? Es ist dringend an der Zeit, sich eingehender damit zu beschäftigen.

Jens Grochtdreis


Als Tim Berners-Lee das WWW erfand, suchte er nur nach einer einfachen Oberfläche für den Austausch wissenschaftlicher Dokumente. Er konnte nicht ahnen, dass seine Erfindung sehr schnell von der werbetreibenden Industrie, von Firmen und von Privatpersonen gekapert werden würde. Die schlichten Möglichkeiten von HTML wurden in Richtung einer einfachen Gestaltung von Webseiten erweitert. Und es dauerte auch nicht lange, da wurden die ersten Tricks ausprobiert, ein wenig mehr Layout auf die neu entstehenden Webseiten zu bringen ...

Wie layouten wir heute?

Doch nach all den Jahren gab es nie eine echte Layouttechnik mittels CSS, die als solche gedacht war. Wie erstellen wir denn heute unsere Layouts und gestalten die einzelnen Module? Wir nutzen Eigenschaften, die dafür meist nicht gedacht waren:

Floatsdisplay: tabledisplay: inline-block

Floats wurden ursprünglich in CSS integriert, um Bilder innerhalb von Absätzen nach links oder rechts fließen zu lassen; das hatte man bislang mit dem align-Attribut direkt in HTML ermöglicht. Einzig die Positionierungstechniken eröffnen planmäßig Chancen für Layout. Echtes, flexibles Seitenlayout ist damit aber nur schwer und mit zu großen Einschränkungen möglich. Wir können also zusammenfassen: Es ist 2016, wir schicken selbstfahrende Roboter auf den Mars, die Selfies nach Hause senden. Aber wir haben keine generell einsetzbare Technik, um Seiten mittels CSS zu layouten.

Das sollte sich ab etwa 2009 ändern, denn da begannen die Arbeiten am Standard für Flexbox. Dieser neue Standard sollte mit anderen parallelen Entwicklungen endlich eine echte Layoutmethode für das Web darstellen.

Flexbox ist mittlerweile in allen aktuellen Browsern implementiert und der IE unterstützt ihn bis hinunter zur Version 10. Laut Can I use kann Flexbox von gut 97 Prozent aller Browser verwendet werden [1]. Nur der IE 9 und vorherige Versionen können mit dieser Technik nichts anfangen. Doch trotz oft sehr langsamer Prozesse in den IT-Abteilungen großer Unternehmen und Behörden sollten gerade diese beiden Browser in Kürze das Zeitliche segnen. Es spricht mittlerweile also nichts mehr dagegen, Flexbox zu nutzen.

Sollten Sie noch zahlreiche Nutzer mit alten IEs haben, verwenden Sie Flexbox als Erweiterung, als progressive enhancement. Wenn die IE 9 und 8 dann endlich ausgestorben sind, haben Sie erste Erfahrungen mit Flexbox sammeln können und können die Sonderbehandlung für die alten Browser einfach entfernen.

Was ist Flexbox, und wie viele?

Flexbox ist eine...

Entwickler Magazin
Wissenswertes rund um Flexbox

Layout in flexibel

Wir schreiben das Jahr 2016 - der Flexbox-Standard ist in den Browsern angekommen. Doch wie genau funktioniert das alles, und wann lohnt sich der Einsatz? Es ist dringend an der Zeit, sich eingehender damit zu beschäftigen.

Jens Grochtdreis


Als Tim Berners-Lee das WWW erfand, suchte er nur nach einer einfachen Oberfläche für den Austausch wissenschaftlicher Dokumente. Er konnte nicht ahnen, dass seine Erfindung sehr schnell von der werbetreibenden Industrie, von Firmen und von Privatpersonen gekapert werden würde. Die schlichten Möglichkeiten von HTML wurden in Richtung einer einfachen Gestaltung von Webseiten erweitert. Und es dauerte auch nicht lange, da wurden die ersten Tricks ausprobiert, ein wenig mehr Layout auf die neu entstehenden Webseiten zu bringen ...

Wie layouten wir heute?

Doch nach all den Jahren gab es nie eine echte Layouttechnik mittels CSS, die als solche gedacht war. Wie erstellen wir denn heute unsere Layouts und gestalten die einzelnen Module? Wir nutzen Eigenschaften, die dafür meist nicht gedacht waren:

Floatsdisplay: tabledisplay: inline-block

Floats wurden ursprünglich in CSS integriert, um Bilder innerhalb von Absätzen nach links oder rechts fließen zu lassen; das hatte man bislang mit dem align-Attribut direkt in HTML ermöglicht. Einzig die Positionierungstechniken eröffnen planmäßig Chancen für Layout. Echtes, flexibles Seitenlayout ist damit aber nur schwer und mit zu großen Einschränkungen möglich. Wir können also zusammenfassen: Es ist 2016, wir schicken selbstfahrende Roboter auf den Mars, die Selfies nach Hause senden. Aber wir haben keine generell einsetzbare Technik, um Seiten mittels CSS zu layouten.

Das sollte sich ab etwa 2009 ändern, denn da begannen die Arbeiten am Standard für Flexbox. Dieser neue Standard sollte mit anderen parallelen Entwicklungen endlich eine echte Layoutmethode für das Web darstellen.

Flexbox ist mittlerweile in allen aktuellen Browsern implementiert und der IE unterstützt ihn bis hinunter zur Version 10. Laut Can I use kann Flexbox von gut 97 Prozent aller Browser verwendet werden [1]. Nur der IE 9 und vorherige Versionen können mit dieser Technik nichts anfangen. Doch trotz oft sehr langsamer Prozesse in den IT-Abteilungen großer Unternehmen und Behörden sollten gerade diese beiden Browser in Kürze das Zeitliche segnen. Es spricht mittlerweile also nichts mehr dagegen, Flexbox zu nutzen.

Sollten Sie noch zahlreiche Nutzer mit alten IEs haben, verwenden Sie Flexbox als Erweiterung, als progressive enhancement. Wenn die IE 9 und 8 dann endlich ausgestorben sind, haben Sie erste Erfahrungen mit Flexbox sammeln können und können die Sonderbehandlung für die alten Browser einfach entfernen.

Was ist Flexbox, und wie viele?

Flexbox ist eine...

Neugierig geworden?


   
Loading...

Angebote für Teams

Für Firmen haben wir individuelle Teamlizenzen. Wir erstellen Ihnen gerne ein passendes Angebot.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang