Mit dem Flexible Box Layout Modul lassen sich ganz einfach neue Layouts, besonders für mobile Designs erstellen und definieren und das nur mit CSS.
Dabei werden auf effizientere Weise HTML-Container unabhängig vom HTML-Code ausgerichtet und verteilt. Es ist ebenfalls möglich den Raum flexibel zu verkleinern oder zu vergrößern. Hierzu sind keine Größenangaben und CSS-Eigenschaften wie position, float oder clear nötig.
Die Grundidee für Flexbox ist es den HTML-Containern die Möglichkeit zu geben, sich selbst in Höhe und Breite zu verändern um den verfügbaren Raum zu füllen. Flexbox ist zudem richtungsunabhängig da Block Layouts immer vertikal orientiert und inline horizontal ausgerichtet sind.
Flexbox wird von allen Browsern mit der aktuellsten Version mit Ausnahme des Internet Explorers unterstützt.
Unter den älteren Browser-Versionen sind einige Bugs bekannt, die in einer Übersicht nachzulesen sind.
Hilfreiche Informationen zu Cross-Browser-Workarounds wurden zudem zusammengestellt.
Flexbox Grundlagen: Begriffe und Funktionen
Im Flexbox-Modul wird ein Teil der Eigenschaften am Eltern-Element (Flex-Container) angewandt, die anderen wiederum an den Kinder-Elementen (Flex-Item).
Während reguläre Layouts auf block und inline Ausrichtung aufbauen, baut Flexbox auf "Flex-flow" Ausrichtung auf. Die Idee hinter dieser Methode veranschaulicht folgende Grafik: