Flexible Layouts: CSS3 Flexbox

Das Flexible Box Layout Module oder kurz Flexbox genannt, ist ein ausgesprochen mächtiges Layout-Modul in CSS3. Es ermöglicht vieles, was mit klassischem CSS gar nicht oder nur durch Tricksereien möglich wäre.

- Elemente beliebig mehrzeilig horizontal oder vertikal anordnen

- Anordnung der Elemente ganz genau steuern und den Leerraum auf verschiedene Arten verteilen

- Reihenfolge und Ausmaße der Elemente können beliebig bestimmt und flexibel festgelegt werden

Andererseits ist der Umgang mit dem Flexible Box Layout Modul auch relativ komplex. Schwierigkeiten können vor allem durch den unterschiedlichen Support in den verschiedenen Browsern entstehen, da sich die CSS Notation über die Jahre stark verändert hat. Die unterschiedlichen Schreibweisen sind hier angeführt.

- Aktuelle Syntax: display: flex;

- Hybrid Syntax 2011: display: flexbox;

- Alte Syntax 2009: display: box;

In der nachfolgenden Tabelle, von caniuse entlehnt, soll ein kurzer Überblick über den Browsersupport der aktuellen Flexbox Variante display: flex; gegeben werden.

Flexbox flex

Als Unterstützung in der Stylesheet Entwicklung bietet es sich an, Hilfsmittel wie beispielsweise einen Autopräfixer für ältere CSS Versionen zu verwenden, der automatisch den notwendigen Code erzeugt. Ein solches Tool findet sich unter dem nachfolgenden Link:

http://jsbin.com/gufoko/quiet 

In diesem Blogbeitrag widmen wir uns der aktuellen Flexbox Variante in CSS3. Bei der Arbeit mit dem CSS Flexible Box Layout wird ein eigenes Vokabular verwendet. Als Flexcontainer wird das umfassende Element bezeichnet, indem sich die sogenannten Flexitems befinden. .Die Steuerung und Ausrichtung der einzelnen Elemente erfolgt schließlich über CSS Klassen. Das anschließende Codesegment soll einen kurzen Überblick geben. Hier werden die Flexitems innerhalb des Flexcontainers automatisch nebeneinander angeordnet und sind gleich hoch.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Flexbox Beispiel</title>
    <style>
        p {
            padding: 2em;
            color: white;
            font-family: sans-serif;
        }
        .uno {
            background-color:red;
        }
        .due {
            background-color:gold;
        }
        .tre {
            background-color:green;
        }
        .flexbox {
            /* Starten der Flexbox */
            display: flex;
        }
    </style>
</head>
<body>
    <div class="flexbox">
        <p class="uno">Uno</p>
        <p class="due">Due</p>
        <p class="tre">Tre</p>
    </div>
</body>
</html>

 

Das Flexbox-Ergebnis sieht schließlich so aus, dass die Kind Elemente nebeneinander angeordnet werden und die gleiche Höhe haben.

Flexbox

Standardmäßig ist hier das Attribut flex-direction: row vorausgewählt. Um die Elemente untereinander anzuordnen, muss hier die CSS Eigenschaft flex-direction: column gewählt werden. Ein weiterführendes Beispiel zum Thema Flexbox finden Sie im untenstehenden Link.

http://jsfiddle.net/kkonstantin/8o03s30e/

Wenn Sie mehr zum Thema Möglichkeiten der Verwendung von CSS3 und Responsive Design erfahren möchten, raten wir zur aktuellen Schulung: Responsive Design mit CSS3. Viel Spaß und gutes Gelingen beim Ausprobieren des CSS Flexible Box Layout Moduls!

Kommentare sind geschlossen