Inhalt
Will man Elemente auf eine Web-Seite horizontal oder vertikal anordnen und ausrichten, galt in der html-Urzeit die Tabelle als Mittel der Wahl. Das kann aber schnell unübersichtlich werden, besonders wenn man mehr oder weniger schmutzige Tricks anwenden muss, um ein bestimmtes Verhalten zu erzwingen. Gerade die Realisierung von Responsive Designs, also Seiten, die sich der Geometrie und Größe der Betrachtungsgeräte anpassen, ist damit nur schlecht möglich.
Die modernere Alternative sind Flex-Boxen, die eine Vielzahl der sonst nur mit Tricks erreichbaren Eigenschaften bereits besitzen. Leider ist das System gerade zu Beginn nicht gerade intuitiv zu verstehen, weswegen mancher davor zurückschreckt. Daher dieses kleine Anleitung, die den Einstieg hoffentlich etwas erleichtert.
Start mit „flex”
Flex-Boxen dienen dazu, Elemente in Zeilen oder Spalten nach gewissen Regeln anzuordnen, so dass sie sich bei einer Änderung der Größe der Gesamtseite flexibel daran anpassen.
Als Beispiel soll folgende einfache Seite dienen, die im Element div.umschlag drei Textabsätze mit Überschriften in jeweils einem div.inhalt Block enthält:
<h1>Flex-Box Beispiel 1</h1>
<div class="umschlag">
<div class="inhalt"><h2>Erster Eintrag</h2>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
<div class="inhalt"><h2>Zweiter Eintrag</h2>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
<div class="inhalt"><h2>Dritter Eintrag</h2>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
</div>Das Design sieht damit sehr schlicht so aus:
Will man die einzelnen Absätze in einem mehrspaltigen Satz anordnen, würde es mit html-Bordmittel schwierig. Flex-Boxen vereinfachen diese Aufgabe sehr.
Das übergeordnete Element div.umschlag erhält einfach als display Attribut das Schlüsselwort flex:
<style>
.umschlag {
display: flex;
}
</style>Das macht div.umschlag zum Flex-Container und die div.inhalt Blöcke zu Flex-Elementen. Das Standard-Verhalten der Flex-Box ordnet alle Elemente in der Box Nebeneinander in identischer Größe an:
Erstaunlich, was diese kleine Eintrag bewirkt, oder?
Will man an dem Standard-Verhalten etwas ändern, sollte man sich allerdings etwas Theorie aneignen, um zu wissen, was man tut.
Das Flex Modell
In dem unten in den Quellen angegebenen Mozilla-Artikel sind die wichtigsten Begriffe des Flex-Modells in einer anschaulichen Grafik dargestellt.
In dem Elternelemen, genannt „Flex-Container”, sind alle „Flex-Elemente” an zwei Achsen angeordnet. Entlang der Hauptachse („main axis”) sind die Flex-Elemente aufgereiht. Der Beginn der Achse ist „main start”, das Ende „main end” und die Distanz dazwischen die „main size”.
Senkrecht dazu verläuft die Querachse („cross axis”) von „cross start” bis „cross end”; die Entfernung dazwischen ist die „cross size”.
Ausrichtung
Ob die Elemente horizontal oder vertikal angeordnet werden sollen, lässt sich mit dem Attribut „flex-direction” festlegen. Der Standardwert ist
flex-direction: row;und ordnet die Elemente horizontal in einer Zeile an. Der andere Wert
flex-direction: column;ordnet die Elemente erwartungsgemäß vertikal in einer Spalte an.
Umbrüche
Bei sehr vielen Flex-Elementen kann der Platz auf der Zeile schon mal knapp werden:
Unschön, aber mit dem Attribut „flex-wrap” lässt sich die Zeile umbrechen und auf mehrere aufteilen.
flex-wrap: wrap;Die Breite der einzelnen Elemente muss bei den css-Eigenschaften der Elemente mit der „flex” Eigenschaft angegeben werden, also z.B.
.inhalt {
flex: 200px;
}Dann werden die Elemente mit einer Breite von 200px in einer Zeile aufgereiht. Reicht der Platz nicht mehr, wird das nächste Element in die folgende Zeile verschoben.
Schon besser. Wenn man jetzt übrigens die Breite des Browser-Fenster verkleinert, werden die Flex-Elemente entsprechend angepasst und entsprechend der Breite umgebrochen:
Einen Nachteil von Flex-Boxen sieht man übrigens am unteren Rand: die Zeilen sind unabhängig voneinander. In jeder Zeile wird der horizontale Platz separat nach den Regeln der Box aufgeteilt. Sind wie in der letzten Zeile weniger Elemente auf der Zeile, erhalten sie entsprechend mehr Platz. Ein strenges Raster lässt sich besser mit der Grid-Box erzeugen.
Die Attribute „flex-direction” und „flex-wrap” kann man auch als Attribut „flex-flow” zusammenfassen:
flex-flow: row wrap;Flexible Größe
Bis jetzt war auf jeder Zeile jedes Flex-Element gleich breit. Will man unterschiedliche Breiten erzeugen, funktioniert das ebenfalls mit dem „flex” Attribut der Flex-Elemente. Statt der oben benutzten absoluten Breite gibt man dann eine einheitslose Verhältniszahl an:
.inhalt {
flex: 1;
}Diese Definition gilt für alle Flex-Elemente und würde damit alle Elemente wieder gleich groß darstellen. Soll ein Element eine andere Größe bekommen, muss für dieses Element ein abweichender flex Wert definiert werden:
.inhalt:last-child {
flex: 2;
}Damit bekommt das letzte Flex-Element die doppelte Breite:
Zusätzlich kann auch eine minimale Breite definiert werden:
.inhalt {
flex: 1 200px;
}
.inhalt:last-child {
flex: 2 200px;
}Damit bekommt jedes Element zunächst eine Breite von 200px. Der übrige Platz wird entsprechend des Verhältnisses der flex-Zahlen verteilt. Das führt zu einer leicht veränderten Darstellung:
Wachsen und Schrumpfen
Mit dem kombinierten „flex” Attribut kann man drei Eigenschaften gleichzeitig einstellen: flex-grow, flex-shrink und flex-basis:
flex-growist die einheitenlose Verhältniszahl, die die relative Größe des Elements im Verhältnis zu anderen Elementen angibtflex-shrinkist eine weitere einheitenlose Verhältniszahl, die angibt, wie stark ein Element verkleinert wird, wenn es größer als der übergeordnete Container wird.flex-basislegt die Mindestgröße des Elements fest.
Folgende Angaben sind also identisch:
flex 1 1 200px;und
flex-grow 1;
flex-shrink 1;
flex-basis: 200px;Ausrichtung
Flex-Elemente können mit den Attributen „align-items” und „justify-content” horizontal und vertikal ausgerichtet werden.
align-itemsdefiniert im Container die Anordnung aller Elemente auf der Querachse:normaloderstretch
Die Elemente werden entlang der Querachse so gestreckt, dass sie den Platz ausfüllen.center
Die Elemente behalten ihre Größe bei und werden entlang der Querachse zentriert.start,end
Die Elemente werden am den Start bzw. an das Ende der Querachse ausgerichtet.
- Die Anordnung einzelner Elemente kann mit „align-self” im Flex-Element selbst überschrieben werden.
justify-contentdefiniert die Anordnung der Elemente auf der Hauptachse:normaloderstartoderleft
Richtet die Elemente am Start der Hauptachse aus.endoderflex-endoderright
Richtet die Elemente am Ende der Hauptachse aus.center
Richtet die Elemente mittig aus.space-between
Richtet das erste Element links, das letzte Element rechts und alle dazwischen mittig mit gleichmäßigem Abstand aus.space-around
Richtet die Elemente mittig mit gleichmäßigem Abstand (auch am Start und Ende) aus.
Hier ein einfaches Beispiel:
<style>
div {
height: 100px;
border: 1px solid black;
display: flex;
align-items: <align>;
justify-content: <justify>;
}
button {
width: 10%;
}
</style>
<div>
<button>E1</button>
<button>E2</button>
<button>E3</button>
<button>E4</button>
</div>Mit den unterschiedlichen Werten für align und justify sieht das so aus:
Umsortieren
Die Reihenfolge der Elemente kann mit „order” verändert werden. Dadurch wird ein „order value” gesetzt, nach dem die Flex-Elemente aufsteigend sortiert werden. Zu Beginn haben alle Elemente das „order value” Null.
Bei gleichem „order value” werden die Elemente nach der Reihenfolge im html-Code sortiert. Auch negative Werte sind für das „order value” möglich, um ein Element vor allen anderen mit dem Standardwert 0 erscheinen zu lassen.
Die Sortierung im Flex-Container ändert allerdings nichts an der Tab-Reihenfolge, also an der Reihenfolge, in der Elemente mit der Tab-Taste durchlaufen werden.
Verschachtelte Flex-Boxen
Flex-Boxen können verschachtelt werden. Innerhalb einer Flex-Box können weitere platziert werden, um komplizierte Strukturen zu erzeugen. Das geschieht, indem man einem Flex-Element wieder die „display” Eigenschaft „flex” zuweist. innerhalb dieser Tochter-Box gelten dann nur die Definitionen dieses Tochter-Containers.
Flex-Boxen haben Eigenschaften, die die dynamische Anordnung von Elementen innerhalb eines umgebenden Containers sehr vereinfachen können. Wer es als Nachteil empfindet, dass Breite und Höhe der Flex-Elemente nicht immer einheitlich ist, sollte einen Blick auf die Schwester der Flex-Box, das Grid-Layout werfen.
Quellen: