Flexbox-Modul

Mit der Flexbox könnt ihr die darin enthaltenen Module in der Breite verändern und auf unterschiedliche Weise neben- oder untereinander darstellen. Das Interface der Flexbox bietet dazu verschiedene Möglichkeiten. Alle Einstellungen sind responsive, d.h. sie können in jeder Auflösung geändert werden.

Einstellungsmöglichkeiten:

Breite der enthaltenen Module:

Hier kannst du einfach die gewünschte Breite der enthaltenen Module eintippen oder auswählen. Wenn du nur eine Zahl eingibst (z.B. "10%"), dann werden alle enthaltenen Module auf diese Breite gesetzt. Du kannst auch eine Sequenz eingeben, z.B. "10% 30% 60%". In diesem Fall wäre das erste enthaltene Modul 10% breit, das zweite 30% und das dritte 60%. Ein Modul rutscht automatisch in die nächste Zeile, wenn nicht mehr genügend Platz vorhanden ist. Um alle Module untereinander darzustellen, gibt man einfach "100%" ein.
Die Angabe der Breite kann in Prozent oder in Pixeln erfolgen. Das ist auch gemischt möglich (z.B. "50% 200px"). Für Texte, Überschriften oder Links macht auch die Einstellung "auto" Sinn. Das bedeutet, dass das Modul so breit wie der enthaltene Text dargestellt wird. Damit lassen sich beispielweise mehrere Links direkt nebeneinander darstellen. Für Abstände zwischen den Modulen verwendest du einfach den Style "Abstände".
Die Breite eines einzelnen Moduls kannst du auch verstellen, in dem du mit der Maus das "+|-"-Symbol nach links oder rechts ziehst.

Horizontale Verteilung:

Damit können die Module unterschiedlich nebeneinander angeordnet werden. Interessant sind die Funktionen "verteilt mit äusserem Rand" und "verteilt ohne äusseren Rand". In beiden Fällen wird der zur Verfügung stehende Freiraum gleichmässig zwischen den Modulen verteilt.

Vertikale Verteilung:

Hier kann eingestellt werden, wie unterschiedlich hohe Module zueinander platziert sind. Sehr hilfreich ist die Einstellung "gleiche Höhe". In diesem Fall werden alle Module in einer Zeile gleich hoch dargestellt.

Reihenfolge der Module umkehren

Wenn diese Einstellung aktiviert ist, dann werden die Module in umgekehrter Reihenfolge angezeigt. Das kann sinnvoll sein, wenn man in einer kleineren Auflösung die Abfolge der Module ändern möchte.

Ausrichtung dieses Moduls

Diese Einstellung kennt ihr bereits vom Grid- und Container-Modul. Wird normalweise verwendet, um ein Modul zu zentrieren und üblicherweise in Kombination mit dem Style "Höhe und Breite" eingesetzt (um beispielweise die Maximalbreite in Pixeln einzustellen).

Einschränkungen

Die Flexbox basert auf der CSS-Syntax "Flexbox". Diese wird leider nicht von älteren Browsern wie dem Internet Explorer 9 und 10  unterstützt. In diesen Browsern werden die Module immer in der eingestellten Breite linksbündig nebeneinander angezeigt. Einen Überblick über die aktuelle Browserunterstützung findest du unter http://caniuse.com/#search=flexbox).

Du findest nicht das was du suchst? Kein Problem, schick uns eine E-Mail an help@rukzuk.com

Built with pride in rukzuk © 2015 rukzuk AG