Flexbox - Übersicht

Caufsteigend SStil Sheets (CSS) ist eine einfache Designsprache, die den Prozess der Präsentierbarkeit von Webseiten vereinfachen soll. CSS übernimmt das Erscheinungsbild einer Webseite.

Mit CSS können Sie die Farbe des Texts, den Schriftstil, den Abstand zwischen Absätzen, die Größe und Anordnung der Spalten, die Verwendung von Hintergrundbildern oder -farben, Layoutdesigns, Variationen in der Anzeige für verschiedene Geräte und Bildschirmgrößen steuern sowie eine Vielzahl anderer Effekte.

Um die Position und die Abmessungen der Felder zu bestimmen, können Sie in CSS einen der verfügbaren Layoutmodi verwenden:

The block layout - Dieser Modus wird zum Auslegen von Dokumenten verwendet.
The inline layout - Dieser Modus wird zum Auslegen von Text verwendet.
The table layout - Dieser Modus wird zum Auslegen von Tabellen verwendet.
The table layout - Dieser Modus wird zum Positionieren der Elemente verwendet.

Alle diese Modi werden verwendet, um bestimmte Elemente wie Dokumente, Text, Tabellen usw. auszurichten. Keiner dieser Modi bietet jedoch eine vollständige Lösung für das Layout komplexer Websites. Anfänglich wird dies verwendet, indem eine Kombination aus schwebenden Elementen, positionierten Elementen und Tabellenlayout (häufig) verwendet wird. Schwimmer erlauben es jedoch nur, die Boxen horizontal zu positionieren.

Was ist Flexbox?

Zusätzlich zu den oben genannten Modi bietet CSS3 einen weiteren Layoutmodus Flexible Box, der allgemein als bezeichnet wird Flexbox.

In diesem Modus können Sie problemlos Layouts für komplexe Anwendungen und Webseiten erstellen. Im Gegensatz zu Floats bietet das Flexbox-Layout die vollständige Kontrolle über Richtung, Ausrichtung, Reihenfolge und Größe der Boxen.

Funktionen der Flexbox

Im Folgenden sind die bemerkenswerten Funktionen des Flexbox-Layouts aufgeführt:

Direction - Sie können die Elemente auf einer Webseite in einer beliebigen Richtung anordnen, z. B. von links nach rechts, von rechts nach links, von oben nach unten und von unten nach oben.
Order - Mit Flexbox können Sie die Reihenfolge des Inhalts einer Webseite ändern.
Wrap - Bei inkonsistentem Speicherplatz für den Inhalt einer Webseite (in einer Zeile) können Sie diese in mehrere Zeilen (horizontal) und vertikal einschließen.
Alignment - Mit Flexbox können Sie den Inhalt der Webseite in Bezug auf ihren Container ausrichten.
Resize - Mit Flexbox können Sie die Größe der Elemente auf der Seite erhöhen oder verringern, um sie an den verfügbaren Platz anzupassen.

Browser unterstützen

Im Folgenden sind die Browser aufgeführt, die Flexbox unterstützen.

Chrome 29+
Firefox 28+
Internet Explorer 11+
Opera 17+
Safari 6.1+
Android 4.4+
iOS 7.1+