Flexbox – Responsive Layouts ohne Media Queries

Von: Jonas

Mit Flexbox können automatisch responsive Komponenten erzeugt werden, die eigene Breakpoints besitzen, jedoch keine Media Queries benötigen.

Aktualisiert von 2019 – 2023 11 Kommentare

Innerhalb von Flexbox kann mit den Eigenschaften flex-grow, -shrink & -basis festgelegt werden, ob Elemente größer werden dürfen, ob sie kleiner werden dürfen und welche Ausgangsgröße zugrunde liegt. Mit Flexbox lassen sich somit responsive Layouts herstellen, die keine Media Queries benötigen. Das wiederum gilt aktuell in einigen Anwendungsfällen als »Best Practise«, da in sich abgeschlossene Komponenten entwickelt werden können, die nicht auf die Größe des Viewports sondern auf den verfügbaren Platz im Elternelement reagieren.

Automatisch umbrechende Spalten

Stellen wir uns als Beispiel für diesen Beitrag eine »Card-Komponente« vor, die aus einem Bildbereich und aus einem Textbereich besteht. Wenn die Komponente viel Platz hat, soll das Bild neben dem Text angezeigt werden – bei wenig Platz ist das Bild über dem Text.

Mit folgendem Code kann das gewünschte Ergebnis erreicht werden, ohne dass dafür ein Media Query notwendig ist.

<div class="card">
  <div class="media"></div>
  <div class="content"></div>
</div>

.card {
  display: flex;
  flex-wrap: wrap;
  background: silver;
}

.card > * {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 280px;
}

.media {
  background: black;
  min-height: 280px;
}

Der äußere Container (.card) ist eine Flexbox, was dazu führt, dass standardmäßig die beiden enthaltenen Kind-Elemente nebeneinander und gleich hoch angezeigt werden. Mit flex-wrap wird festgelegt, dass die Kindelemente umbrechen dürfen, wenn zu wenig Platz zur Verfügung steht.

Die Kindelemente selbst dürfen dank flex-grow: 1; größer und dank flex-shrink: 1; kleiner werden und erhaltenen einen Ausgangswert für die Breite von 280 Pixeln. Dieser Wert ist der »Breakpoint« der Komponente. Sobald eine der beiden Spalten weniger als 280 Pixel zur Verfügung hat, brechen die Elemente um und verschieben sich untereinander. Da sie wachsen und schrumpfen dürfen, sind sie auch in dieser Anordnung von der Breite her flexibel.

Beispiel anschauen

Mehrere Elemente umbrechen lassen

Die Card-Komponente kann auch mehrfach nebeneinander verwendet werden. Das Prinzip aus dem obigen Beispiel wird dann noch einmal auf höherer Ebene wiederholt.

Wenn Sie drei Mal zum Einsatz kommt, lässt sich ein interessanter Effekt erkennen: Die dritte Card rutsch im Zwischenschritt quer unter die anderen beiden und nimmt – da viel Platz zur Verfügung steht – automatisch die Darstellung mit Bild links und Text rechts ein.

Der Code unterscheidet sich nur geringfügig vom vorherigen Beispiel. Es wurde lediglich ein Container hinzugefügt und als Flexbox definiert. Zusätzlich wird den Kind-Elemtenten (.card) eine flex-basis zugewiesen.

.container {
  display: flex;
  flex-wrap: wrap;
}

.container > * {
  flex: 1 1 calc(280px + 1em)); /* 1em margin als Spaltenabstand berücksichtigt, calc() nicht notwendig */
}

Beispiel anschauen

Umbruch ohne Zwischenschritt

Der Zwischenschritt kann nun natürlich als sehr unschön empfunden werden – je nach gestalterischer Ausprägung des Projekts. Um den Zwischenschritt zu überspringen gibt es einen Trick, der erstmals im Artikel The Flexbox Holy Albatross beschrieben wurde. Die Anpassung führt dazu, dass die drei Card-Elemente entweder nebeneinander oder untereinander angezeigt werden. Nach wie vor reagieren sie auf unterschiedlich viel Platz und strukturieren sich selbstständig um.

Der Trick arbeitet mit einer Berechnung des flex-basis-Werts, die dazu führt, dass bei wenig Platz extrem kleine und bei viel Platz extrem große Werte entstehen. Somit wird die Komponente in ihre beiden Extremzustände gezwungen und der Zwischenschritt verschwindet. Eine detaillierte Erklärung des Tricks findet ihr hier.

.card {
  display: flex;
  flex-wrap: wrap;
  flex-basis: calc(960px * 999 - 100% * 999);
}

Beispiel anschauen

Geschrieben von:

Jonas Hellwig

Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.

Jonas Hellwig bei Xing