Einführung

Ich wette, Sie haben bereits einige Stilelemente zur horizontalen oder vertikalen Anordnung auf einer Seite erstellt. Bislang jedoch fehlte in CSS ein geeigneter Mechanismus für diese Aufgabe. Lernen Sie das CSS3 Flexible Box Module, kurz Flexbox genannt, kennen.

Im Entwurf wird die Flexbox so beschrieben:

[...] ein CSS -Boxmodell, das für das Schnittstellendesign optimiert ist. Es bietet ein zusätzliches Layoutsystem zu den bereits vorhandenen Systemen in CSS. [CSS21] In diesem neuen Boxmodell werden die untergeordneten Elemente einer Box entweder horizontal oder vertikal angelegt. Nicht benötigte Bereiche können entweder einem bestimmten untergeordneten Element zugewiesen oder unter den untergeordneten Elementen aufgeteilt werden, indem Sie dem zu erweiternden Element "Flex" zuweisen. Die Verschachtelung dieser Boxen (horizontal in vertikal bzw. vertikal in horizontal) kann verwendet werden, um Layouts in zwei Ebenen zu erstellen. Dieses Modell basiert auf dem Verschachtelungsmodell der XUL -Benutzeroberflächensprache, die für die Benutzeroberfläche vieler Mozilla-Anwendungen wie Firefox verwendet wird.

Super. Was heißt das jetzt für Sie als Entwickler, oder besser, als Layout-Architekt?

1. Floats? Die brauchen wir nicht.
2. Layouts, die zuvor eine Herausforderung waren, sind nun verständlicher.
3. Wir können wirklich flexible Layouts erstellen und der Browser macht die Berechnungen für uns.

Flexbox stellt einen neuen Wert für die display-Eigenschaft (den box-Wert) und acht neue Eigenschaften bereit:

• box-orient
• box-pack
• box-align
• box-flex
• box-flex-group
• box-ordinal-group
• box-direction
• box-lines

Allgemeine Flexbox-Stileigenschaften

Stile für die Box

display: box

Dieser neue Wert für den "display"-Stil integriert dieses Element und dessen direkte untergeordnete Elemente in das flexible Boxmodell. Das Flexbox-Modell funktioniert nur mit direkten untergeordneten Elementen.

box-orient

Werte: horizontal | vertical | inherit

Wie sollen die untergeordneten Elemente ausgerichtet werden? Es gibt die beiden zusätzlichen Werte inline-axis (der echte Standardwert) und block-axis, aber diese entsprechen horizontal bzw. vertikal.

box-pack

Werte: start | end | center | justify

Legt die Anpassung der Box entlang der box-orient-Achse fest. Wenn also box-orient horizontal ist, wird dadurch bestimmt, wie die untergeordneten Elemente horizontal angepasst werden und umgekehrt.

box-align

Werte: start | end | center | baseline | stretch

Im Prinzip die Schwestereigenschaft von box-pack. Legt fest, wie die untergeordneten Elemente in der Box angepasst werden. Wenn die Ausrichtung horizontal ist, wird die vertikale Anpassung bestimmt und umgekehrt.

Stile für die untergeordneten Box-Elemente

box-flex

Werte: 0 | jede Ganzzahl

Das Flexibilitätsverhältnis für dieses untergeordnete Element. Wenn ein untergeordnetes Element über 1 und ein gleichgeordnetes Element über 2 verfügt, würde jeder zusätzliche Bereich in der übergeordneten Box doppelt so stark von dem gleichgeordneten Element in Anspruch genommen. Der Standardwert ist 0, das heißt, das Element ist nicht flexibel.

Ich habe box-flex-group, box-ordinal-group, box-direction und box-lines ausgelassen, da Sie diese Eigenschaften höchstwahrscheinlich für den Großteil Ihrer Flexbox-Arbeit nicht brauchen. Rufen Sie die Links in der Zusammenfassung auf, um diese Eigenschaften in Aktion zu sehen.

Noch ein Hinweis zur Syntax: Die aktuellen Implementierungen der Flexbox in WebKit und Gecko erfordern die Verwendung eines Anbieter-Präfixes. In dieser Anleitung habe ich dieses aus Gründen der Anschaulichkeit meistens weggelassen. Die Details sind im Abschnitt Browsersupport zu finden.

Was bedeutet Flexibilität?

<div id="flexbox">
  <p>child 1</p>
  <p>child 2</p>
  <p>child 3</p>
</div>

Nun möchten wir diese horizontal nebeneinander anordnen und sie sollen stets gleich hoch sein, unabhängig von ihrem jeweiligen Inhalt. Wie würden Sie dies angehen? Die meisten von Ihnen würden diese Absätze einfach mithilfe der Float-Technik anordnen und vielleicht overflow:hidden; zu dem übergeordneten Element hinzufügen, um die Floats zurückzusetzen. Nichts Besonderes. Wir können es aber auch ganz einfach mit der Flexbox machen:

#flexbox { 
  display: box;
  box-orient: horizontal;
}

Wir weisen das übergeordnete Element in dem obigen Code einfach an, sich gemäß diesem Flexbox-Modell zu verhalten und alle seine untergeordneten Elemente entlang der horizontalen Achse anzuordnen. Keine Floats. Hurra!

Die Breite der untergeordneten Elemente bleibt wie angegeben (bzw. wie ursprünglich vorhanden, falls keine Breite angegeben wurde). Das heißt, wenn die Gesamtbreite aller untergeordneten Elemente geringer ist als die Gesamtbreite des übergeordneten Elements, erhalten wir in etwa Folgendes:

Standardmäßig sind die untergeordneten Elemente einer Flexbox nicht flexibel. Das erscheint seltsam, aber so ist es möglich, dass die untergeordneten Elemente in die Flexibilität einbezogen werden. Was aber tun Sie, wenn die ersten beiden untergeordneten Elemente eine spezielle Breite haben sollen und das dritte untergeordnete Element sich je nach dem verfügbaren Bereich innerhalb des übergeordneten Elements selbst anpassen soll? Kein Problem für die Flexbox:

#flexbox { 
  display: box;
  box-orient: horizontal;
}
#flexbox > p:nth-child(3) {
  box-flex: 1;
}

Hier weisen wir das letzte untergeordnete Element an, flexibel zu sein und den verfügbaren Bereich auszufüllen. Da wir nur einem Element freien Bereich zugewiesen haben, füllt es den gesamten verfügbaren Bereich aus:

Beachten Sie, dass das Element nur entlang der Orientierungsachse der Box flexibel wird. In diesem Fall ist das Element horizontal flexibel.

Der Wert für "box-flex" ist relativ. Wenn nun das zweite und das dritte untergeordnete Element flexibel sein sollten:

#flexbox { 
  display: box;
  box-orient: horizontal;
}
#flexbox > p:nth-child(2),
#flexbox > p:nth-child(3) {
  box-flex: 1;
}

In diesem Fall würden beide dieselbe Menge an freiem Bereich einnehmen, also den verfügbaren Bereich gleichmäßig unter sich aufteilen.

Ein einfaches Beispiel

Sehen Sie sich den Code und das Ergebnis unten an:

Halten Sie den Mauszeiger über eine der Boxen, um die Flexbox in Aktion zu sehen. Während sich die Box, auf die Sie den Mauszeiger halten, erweitert, werden die übrigen Boxen kleiner. Die Gesamtbreite entspricht jedoch stets der Größe der übergeordneten Box.

Hier kommen tatsächlich nur zwei Stile zum Einsatz: display: box erzeugt den Flexbox-Modus und box-flex: 1 bei den untergeordneten Elementen bringt sie dazu, im flexiblen Modus zu arbeiten und den gesamten freien Bereich einzunehmen. Die Standardausrichtung ist horizontal, das heißt, box-orient: horizontal ist eigentlich nicht notwendig. Aus Gründen der Klarheit und Verwaltbarkeit ist es aber trotzdem sinnvoll, diesen Wert einzufügen. Der Standardwert für box-align ist "stretch", darum nehmen diese "div"-Elemente die vollständige Höhe ihrer übergeordneten Box ein. Nicht schlecht, oder? Sie können sich diese Technik als Navigationsoption in dieser Flexiblenav-Demo von Raphael Goetter ansehen.

Führen wir das Ganze noch einen Schritt weiter.

Im Mittelpunkt: Positionierung in der Mitte

Lange Zeit war es eine Herausforderung in CSS, etwas horizontal und vertikal zu zentrieren. Die beste reine CSS-Lösung ist position:absolute; left: 50%; top: 50%;, gepaart mit negativen Werten für den linken/oberen Rand, die der Hälfte der Breite/Höhe entsprechen. Und das funktioniert nur bei Elementen mit explizit angegebener Größe. Uff!

James John Malcom hat uns auf eine Möglichkeit zur vertikalen Ausrichtung aufmerksam gemacht, die auf display:table-cell; basiert und mindestens sechs Jahre alt ist (Dušan Janovský hat 2004 darüber geschrieben). James hat hier die vollständige horizontale und vertikale Lösung dokumentiert. Es funktioniert sogar ohne explizit festgelegte Größe.

Mit der Flexbox können wir es uns noch ein wenig einfacher machen:

Wir legen box-flex für das untergeordnete Element nicht fest, da wir nicht möchten, dass es zusätzlichen Raum in Anspruch nimmt. Es soll unabhängig von seiner Größe immer in der Mitte bleiben. Der große Vorteil hierbei ist, dass wir keine genauen Abmessungen brauchen, um es zu zentrieren. Das Ganze klappt auch mit Block- oder Inline-Elementen. Es funktioniert einfach.

Browsersupport

Können Sie das Flexbox-Modell nun sofort verwenden? Noch nicht, wenn Sie es auf alle Browser ausrichten möchten. Bisher haben wir noch keine Spur der Flexbox in IE 9 oder Opera 10.60 entdeckt. Sie war allerdings in einer der IE 9-Plattformvorschauen enthalten, es ist also möglich, dass Microsoft die Flexbox irgendwann hinzufügt.

Caniuse.com liefert die Fakten zum aktuellen Browsersupport - im Grunde sind es Firefox 3+, Safari 3+ und Chrome. Falls Sie sich mit der mobilen Webkit-Entwicklung beschäftigen, ist die Flexbox eine gute Alternative zu den Standard-Layoutschemas.

Natürlich befindet sich all dies noch in der Testphase, denken Sie also an das Anbieter-Präfix:

/* i wish it was as easy as this: */

display: box;
box-orient: horizontal; 
box-pack: center;
box-align: center;
  

/* but in reality you'll need to do this: */

display: -webkit-box;
-webkit-box-orient: horizontal;
-webkit-box-pack: center;
-webkit-box-align: center;

display: -moz-box;
-moz-box-orient: horizontal;
-moz-box-pack: center;
-moz-box-align: center;

display: box;
box-orient: horizontal;
box-pack: center;
box-align: center;
  

Wenn sich das jetzt nach einer Menge Schreibarbeit anhört, sehen Sie sich die Seite von Alex Russell an: Er hat alle diese Optionen in einigen nützlichen Hilfsklassen zusammengefasst.

Zusammenfassung

Bereits ohne die anderen vier Eigenschaften ergeben sich hier viele Möglichkeiten. Wenn Sie sich noch intensiver mit der Flexbox beschäftigen möchten, sehen Sie sich die Flexbox-Demos von Isotoma und den Mozilla Hacks-Post zur Flexbox an. In der W3C-Flexbox-Spezifikation finden Sie noch ausführlichere Details, wenn Sie mutig genug sind, sich dort hineinzulesen. Legen Sie los und erschaffen Sie ein paar Layouts. Viel Spaß!