Beim Anlegen eines Containers (werden die Möglichkeiten sichtbar: Je nachdem, welche Auswahl man getroffen hat, bekommt man eine mehrspaltige oder verschachtelte Containerstruktur angelegt. Jeder Dieser Container kann einzeln verändert und gestaltet werden.
Schauen wir uns die Möglichkeiten des einzelnen Containers an. Im Beispiel wurden 3 Bilder in verschiedenen Größen mittels Bild-Widget in Originalgrößen platziert. Wenn man in der Arbeitsfläche auf das + klickt bekommt man die Auswahlmöglichkeiten, wenn man einfach ein Widget in den strichliert umrandeten Bereich zieht wird automatisch ein Container erstellt.
Richtung (Direction): gibt an, wie die darin befindlichen Elemente angeordnet werden. Vorgabe, Reihe (von links nach rechts), Spalte (von oben nach unten), Umgekehrte Reihe (von rechts nach links) und Umgekehrte Spalte (von unten nach oben) stehen zur Auswahl.
Verteilung (Justify Content): gibt an wie die Elemente innerhalb des Containers ausgerichtet werden. Man kann keine Angabe machen oder auswählen: Beginn, Zentriert, Ende, Zwischenraum, Abstand im Umkreis und gleichmäßiger Abstand.
Ausrichtung (Align): Die Elemente können am Beginn, Zentriert, Ende oder Dehnen verteilt werden. Letze Option wirkst sich zB. dann aus, wenn durch Setzen dieser Option zB. das Textwidget oder Überschriften auf volle Höhe/Breite gedehnt werden statt nur die Höhe zu bekommen die aus dem Inhalt entsteht.
Lücken. Diese (auch responsive) zu verändernde Einstellungsmöglichkeit erlaubt das Verändern des in den Einstellungen gesetzten Standard-Widget-Abstands. und zwar getrennt für Spalten und Reihen.
Umbruch (Wrap): hier kann man festlegen, ob einzelnen Widgets hintereinander ähnlich wie Text umbrechen soll oder ob kein Umbruch erfolgen soll.
Dort sind noch folgende Optionen zu finden:
Overflow: soll im Falle eines überlaufenden Inhalt das Elemente gestreckt werden (default) oder der überlaufende Inhalt versteckt (hidden).
HTML-Tag: ein Tag kann gewählt werden, voreingestellt ist DIV.
Die erste und wichtigste Einstellung ist die Direction (Richtung).
Das Beispiel zeigt die 6 Möglichkeiten der Verteilung innerhalb einer Reihe, wobei kein Alignment ausgewählt wurde, die Elemente also an der Oberkante ausgerichtet werden (=default). Während die erst 3 Optionen Beginn, Zentriert und Ende einfach zu verstehen sind muss man die folgenden 3 ein wenig durchdenken:
Zwischenraum bedeutet, dass (im Falle der Richtung Reihe) das erste Element Links im Container und das letzte Rechts im Container angeordnet wird.
Abstand im Umkreis bedeutet, dass um jedes Element ein gleichmässiger Abstand gehalten wird. Dadurch wird der tatsächliche Abstand zwischen den Elementen doppelt so breit wie der Abstand links vom ersten bzw rechts vom letzten Element.
Gleichmäßiger Abstand führt dazu dass zwischen dem Rand des Containers und dem ersten Element links, den einzelnen Elementen und zischen dem letzen Element em Ende und de rechten Rand des Containers der selbe Abstand erstellt wird.
Das ganze funktioniert natürlich nur, wenn die Summe aller Breiten oder Höhen der Elemente innerhalb eines Conainers kleiner als die Dimension (Breite oder Höhe) des Containers ist.
Und da man vier verschiedene Richtungen einstellen kann gibt es neben dem Beispiel oben 3 weitere Anordnungen analog dazu, die hier nicht gezeigt werden. (also 4 x 6 = 24 Möglichkeiten)
Innerhalb eines Containers kann man die Elemente nun an Achsen Ausrichten. Im Beispiel der Reihe bedeutet das: Beginn, die Elemente werden oben ausgerichtet. Zentriert führt zu einer Ausrichtung einer Vertikalen Mittelachse, Ende richtet die Elemente unten aus.
Dehnen wiederum führt dazu, dass – soferne das Widget das zuläßt, deswegen habe ich im Beispiel eine Überschrift auf schwarzen Hintergrund eingesetzt – das Element auf die volle Dimension (in dem Fall die Höhe) gestreckt wird.
Zu den bereits beschriebenen 24 Möglichkeiten kommen also noch 4 weitere, 24 x 4 = 96 Möglichkeiten. Jetzt ist klar, warum dieses Modell Flexbox genannt wurde.
