Dies ist die Fortsetzung zu meinen Flexbox Blogartikel vom Dezember 2012. Und die gute Nachricht ist: Es hat sich nichts geändert und es zeichnet sich ab dass Flexbox bleibt wie es ist ¹. Grund genug einen Folgeartikel zu schreiben. Im letzten Artikel habe ich kurz die Grundlagen [2.
Ich hoffe ich lese diesen Artikel nicht in einigen Jahren und lache verzweifelt] , order
und das Seitenverhältnis angerissen. Jetzt kommen dann die spannenden Sachen.
Flex-Direction, Flex-Wrap und Flex-Flow
Flex-Direction Die Ausrichtung der Elemente in einer Flexbox kann man waagerecht und senkrecht positionieren. Zusätzlich kann man auch die Reihenfolge anpassen.
flex-direction: row | row-reverse | column | column-reverse
Hier ein Demo - mit den einzelnen Attributen zum ausprobieren.
Flex-Wrap Mithilfe von flex-wrap
kann ein Umbruch erzwungen und die Reihenfolge umgedreht werden. Es ergeben sich die Möglichkeiten: - nowrap
- Es gibt keinen Umbruch. Dies ist der Standardwert - wrap
- Es erfolgt ein automatischer Umbruch, die Reihenfolge wird aber beibehalten - wrap-reverse
- Ähnlich wie wrap
, allerdings in umgekehrter Reihenfolge
flex-wrap: nowrap | wrap | wrap-reverse
Hier ein Demo zum Ausprobieren.
Flex-Flow Dies ist die Kurzschreibweise für flex-direction
und flex-flow
und erlaubt alle an der Stelle möglichen Werte. Standardmäßig ist dieses Element flex-flow: row nowrap
.
Auch wenn diese Elemente im Wesentlichen nur rudimentär zwischen "normal" und "umgekehrt" unterschieden werden können, sind diese insbesondere verschachtelt und im Zusammenhang mit Media-Queries alleine schon sehr mächtig.
Justify-Content, Align-Items und Align-Content
Sollte es vorkommen, dass eine Flexbox nicht die ganze Seite ausfüllt - sei es durch feste Werte oder ausgereizte Maximalangaben - können die Elemente mit justify-content
ausgerichtet werden. Hierbei gibt es 5 Werte, wobei vorallem die ersten drei dem herkömmlichen text-align
ähnlich sind
flex-start
- Die Elemente werden zur Seite des ersten Elements ausgerichtet. Also auch abhängig von derflex-direction
(Standardwert)flex-end
- Analog dazu werden diese Elemente am Ende ausgerichtetcenter
- selbsterklärendspace-between
- Es wird gleichmäßig Abstand zwischen den Elementen vergeben, jedoch nicht am Rand.space-around
- Ähnlich dem vorherigen, allerdings mit Abstand zum Rand.
Hier ein Demo mit allen Werten zum Ausprobieren..
align-items Da Flexbox nicht nur horizontal, sondern auch vertikal sehr präsent ist, gibt es analog zu justify-content
auch noch die Möglichkeit Elemente vertikal zu orientieren. Darum gibt es auch sehr ähnliche Werte.
flex-start
- Die Elemente werden zur Seite des ersten Elements ausgerichtet. Also auch abhängig von derflex-direction
(Standardwert)flex-end
- Analog dazu werden diese Elemente am Ende ausgerichtetcenter
- selbsterklärendspace-between
- Es wird gleichmäßig Abstand zwischen den Elementen vergeben, jedoch nicht am Rand.space-around
- Ähnlich dem vorherigen, allerdings mit Abstand zum Rand.
Obligatorisches Demo.
align-content Dieses Element richtet den kompletten Block aus. Es kann als vertikale Version von justify-content
gesehen werden. Auch hier ist die Benennung und Funktion ähnlich den vorherigen Elementen. align-content
kann mit folgenden Werten aufgerufen werden
flex-start
- Nach oben ausgerichtete Elementeflex-end
- nach unten ausgerichtetcenter
- mittig ausgerichtetspace-between
- Gleichmäßiger Abstand zwischen Elementenspace-around
- Gleichmäßiger Zeilenabstand, auch oben und am unteren Randstretch
- Elemente werden auf die Höhe gezogen.
Und die Demo zum rumspielen.
Das war immer noch nicht alles, es gibt noch flex-shrink und flex-grow und vieles mehr. Und noch diverse Techniken, wie man mit Responsiven Layouts umgehen kann. Wie immer: Vorschläge, Kritik, Feedback gerne in die Kommentare, Mail oder Twitter!