kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

Flexbox – Responsive Layouts ohne Media Queries

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.

Workshops und Seminare von kulturbanause

Adobe XD, Performance, Responsive Design, Sketch, Visual Prototyping, Web Animationen, Corporate Design …

Jetzt Frühbucher-Rabatte sichern!

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.

Automatisch umbrechende Spalten mit Flexbox und ohne Media Query

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.

Bei mehreren Elemente rutscht im Zwischenschritten ein Element quer unter die anderen

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.

Die drei Cards werden entweder untereinander oder nebeneinander angezeigt. Dennoch reagieren sie inhaltlich 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

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Unterstützung bei Responsive Design-Projekten

Unsere Agentur ist auf responsive Design spezialisiert. Wir realisieren u.a. maßgeschneiderte Websites und führen Schulungen durch. Wenn du Unterstützung bei der Planung, Gestaltung und Entwicklung einer Website im Responsive Design benötigst, helfen wir gerne weiter.
Responsive Webdesign-Leistungsangebot →

Das könnte dich auch interessieren

4 Kommentare

  1. maclinux

    Verfasst am 19. September 2019 um 15:54 Uhr.

    Hallo Jonas,
    ich bin durch Zufall auf deinen Blog gestoßen, als ich Infos für responsives Webdesign suchte. Was mich interessiert, ist, wie kompatibel sind die Browser bei der Verwendung von flexbox Layouts?

    MfG maclinux

  2. Sven Rothe

    Verfasst am 5. November 2019 um 9:30 Uhr.

    Mit CSS Grid benötigt man sogar nur 1 Codezeile:

    .container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr);
    }

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.