Flexbox – der Traum aller EntwicklerInnen
Zu einer Webseite gehört auch die Darstellung der Inhalte in Spalten, um z.B. 3 Teaser nebeneinander anzuordnen oder neben dem Hauptinhalt eine schmale Spalte mit der Unternavigation anzuzeigen. Lange wurde dies mit der CSS-Eigenschaft „Float“ umgesetzt. Doch die Lösung mittels Float hat einige nervenraubende Haken.
Nachteile bei Spalten mit Float
Sind die Spalten mit der CSS-Eigenschaft Float umgesetzt, kommt es zum Einen zu Problemen, die Spalten-Breiten prozentual aufzuteilen. Bei einer responsiven Webseite arbeitet man mit Prozenten anstatt festen Werten, damit die Breiten sich dem aufrufenden Display anpassen. So müsste jede Spalte in einem 3-spaltigen Raster eine Breite von 33,3333% bekommen. Einige Browser unterstützen die Ausgabe aber nur mit ganzen Werten. Aus 33,333% werden also 33% und die Spalten schließen nicht bündig ab, da 1% Rest bleibt.
Am problematischsten ist allerdings die Höhen-Berechnung der Spalten. In einigen Layouts sollten diese gleich hoch sein, um z.B. 3 farbige Boxen mit gleicher Höhe nebeneinander anzuzeigen. Mit der Umsetzung der Spalten mittels Float werden die Höhen der einzelnen Spalten nicht beeinflusst, d.h. jede Spalte ist so hoch wie ihr eigener Inhalt. Eine Höhen-Ausrichtung anhand der Nachbar-Spalten ist von Haus aus nicht möglich. Es gibt zur Lösung dieses Problems einige JavaScript-Workarounds oder eine Lösung mittels der Tabellen-Darstellung. Schöne Lösungen sind dies aber nicht.
Flexbox bringt Abhilfe
Aus diesen Problematiken wurde die Idee zu der CSS-Eigenschaft „Flexbox“ geboren und in den CSS-Standard integriert. Doch dauerte es einige Zeit, bis diese auch von allen neueren Browsern unterstützt wurde. Noch heute unterstützt der Internet Explorer 11 die Eigenschaft nur eingeschränkt. Doch ist die Unterstützung nun weitestgehend in allen Browsern gegeben, so dass die Eigenschaft nun auch effektiv eingesetzt werden kann – zur großen Freude unserer EntwicklerInnen.
Mittels Flexbox ausgerichtete Spalten können ohne Rest auf die komplette Breite aufgeteilt werden (z.B. mittels 33,3333%). Zudem werden die Höhen der Spalten aneinander angeglichen. Die CSS-Eigenschaft Flexbox löst somit viele Probleme von Haus aus und bringt des Weiteren noch viele praktische Optionen mit.
Ein Beispiel
In dem folgenden Beispiel werden 3 Spalten mittels der CSS-Eigenschaft Flexbox nebeneinander ausgerichtet. Das Bild zeigt das Endergebnis. Man kann gut erkennen, dass alle 3 Spalten in der Höhe gleich sind.
Das HTML-Gerüst der drei Spalten sieht folgendermaßen aus:
<div class="cs-grid-row">
<div class="cs-grid-col-d-4">
<p>Spalte 1</p>
</div>
<div class="cs-grid-col-d-4">
<p>
Spalte 2
<br/>
<br/>
Mit etwas mehr Text
</p>
</div>
<div class="cs-grid-col-d-4">
<p>Spalte 3</p>
</div>
</div>Der Unterschied zu der Umsetzung der Spalten mittels Float-CSS-Eigenschaft liegt im CSS-Code der Spalten. Der folgende Code-Ausschnitt zeigt diesen. Um die 3 Spalten liegt eine div-Box (class=“cs-grid-row“). Dieser Box wird die Eigenschaft display: flex; zugeteilt. So reagieren diese Box und deren direkte Kind-Elemente als Flexbox und können über die Flexbox-Optionen beeinflusst werden. Den Kind-Elementen (den Spalten) wird via prozentualer Breitenangabe die entsprechende Breite zugewiesen.
.cs-grid-row {
display: flex;
flex-wrap: wrap;
box-sizing: border-box;
margin: 0 -15px;
> .cs-grid-col-d-4 {
flex-basis: 33.33333333%;
max-width: 33.33333333%;
width: 33.33333333%;
flex: 0 0 auto;
box-sizing: border-box;
padding: 0 15px;
}
}Flexbox kann noch mehr
Das Darstellen einiger gleichhoher Spalten ist nur ein kleines Beispiel, was mit Flexbox möglich ist. Prinzipiell kann ein ganzes responsive Webdesign mit Flexbox erstellt und ausgerichtet werden. Auf ein paar Highlights in den Optionen von Flexbox möchte ich hier noch kurz eingehen.
Mit Flexbox kann die Reihenfolge der Kind-Elemente beeinflusst werden. Dies kann nützlich sein, wenn eine linke Spalte in einem responsiven Webdesign in der mobilen Darstellung unterhalb der rechten Spalte dargestellt werden soll. Im normalen Fluss des HTML-Codes wäre dies eigentlich nicht der Fall, die linke Spalte wäre oberhalb der rechten, da sie im HTML-Code vor der rechten Spalte definiert ist. Mit der CSS-Eigenschaft flex-direction kann dies in der passenden Media-Query umgekehrt werden.
Die angesprochene Höhenanpassung kann mittels der Option align-items konfiguriert werden. Wenn die Kind-Elemente nicht auf eine Höhe gebracht werden sollen, können die Spalten vertikal flexibel ausgerichtet werden.
Neben der vertikalen Ausrichtung der Kind-Elemente ist auch eine horizontale Ausrichtung konfigurierbar. Mit der Eigenschaft justify-content kann bestimmt werden, ob die Kind-Elemente innerhalb des umfassenden Eltern-Elements rechts- oder linksbündig angezeigt werden sollen. Auch Optionen mit mittiger Ausrichtung sind möglich.
Fazit zu Flexbox
Die CSS-Eigenschaft Flexbox erleichtert das Erstellen responsiver Inhalts-Spalten ungemein und bietet zudem eine große Palette an Optionen. So ist für die meisten Fälle eine Lösung mittels Flexbox möglich. Auch das Umstrukturieren der Spalten oder Boxen ist für responsive Webseiten mit Flexbox in Verbindung mit Media-Queries sehr einfach und komfortabel. Gerade unter dem responsiven Aspekt eröffnet Flexbox mit wenigen Zeilen CSS-Code Möglichkeiten für die mobilen Ansichten, die sonst aufwendig umgesetzt werden müssten.
Somit ist Flexbox aus der responsiven Web-Entwicklung nicht mehr wegzudenken. Haben Sie Interesse an einer responsiven Webseite? Kommen Sie mit uns in Kontakt.
