Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

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.

Schulungen von kulturbanause

Intensive Trainings mit hohem Praxisbezug. Z. B.: Seminar: Modernes Web Design für Grafik und Corporate Design

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

Geschrieben von Jonas

thumb

Jonas ist Gründer der Webdesign Agentur kulturbanause® und des kulturbanause® Blogs. Er übernimmt Projektleitung, Grafik sowie Frontend- und WordPress-Development und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Als Dozent leitet er Schulungen und Workshops. Am liebsten beschäftigt er sich mit Projekten und Themen, die ihn gleichermaßen konzeptionell als auch gestalterisch und technisch fordern.

Seminare mit Jonas Hellwig anzeigenJonas Hellwig bei Xing

Feedback & Ergänzungen – 9 Kommentare

  1. Herbert
    schrieb am 29.06.2020 um 13:11 Uhr:

    Danke für die tolle flexbox-Seite. Was mir fehlt ist folgendes: Ich möchte 3 Spalten haben und darunter wieder 3. Gibts dazu einen break, der nach einer gewissen Anzahl an Spalten wieder neu beginnt?

    Antworten
    • Jonas Hellwig (Autor)
      schrieb am 27.07.2020 um 15:36 Uhr:

      Hallo Herbert, du kannst flex-wrap: wrap auf dem Flex-Container verwenden und dann den Flex-Items 33.333% Breite bzw. flex-basis zuweisen. Dann sollte es passen. Details zu Flexbox-Grundlagen findest du auch hier.

      Antworten
  2. Alex
    schrieb am 02.04.2020 um 20:51 Uhr:

    Also so richtig gut gewählt sind die Beispiele aber nicht. Richtige Bilder skalieren ja auch nicht ohne Ende und wenn dann sehen sie völlig unbrauchbar aus wenn die mehr als doppelt so groß sind. Je nach TExtmenge ist es auch immer unterschiedlich. Unter realen Bedingungen ist da noch einiges an Anpassung nötig.

    Antworten
    • Jonas Hellwig (Autor)
      schrieb am 02.04.2020 um 21:00 Uhr:

      Hallo Alex, klar – es sind Beispiele für diese Technik, aber welches Problem siehst du denn da? Die Bilder würden wahrscheinlich mit srcset und sizes ausgetauscht werden. Sie passen sich also der Qualität an. Und die Textmenge ist auch recht flexibel änderbar.

      Antworten
  3. Mia Hermann
    schrieb am 06.12.2019 um 11:33 Uhr:

    Vielen Dank für hilfreichen Beitrag! Ich werde natürlich Ihren Blog meinen Kollegen weiterempfehlen.

    Antworten
  4. Sven Rothe
    schrieb am 05.11.2019 um 09:30 Uhr:

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

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

    Antworten
  5. maclinux
    schrieb am 19.09.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

    Antworten

Schreibe einen Kommentar zu Alex Antworten abbrechen

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Design-Projekte mit kulturbanause

Unsere Leinwand ist der Browser und wir beschäftigen uns seit 2010 intensiv mit dem Thema Responsive Design. Wir realisieren flexible Web-Layouts und modulare Design Systeme.

Responsive Webdesign-Leistungsangebot →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →