Flex Grow 4 Boxen
Code Sources Icon Code Sources Icon

Mit "display:flex;"  und "flex-wrap: wrap;" kann ein Responsiv-Layout erstellt werden, ohne dass ein Breakpoint mit Media-Query angewendet wird. Dies, durch das Verhältnis von Minimalbreite "min-width: 400px;" und Basis-Wert für die drei Boxen "flex-basis: 33.3333%;" . Der in dieser Weise festgelegte Umbruchwert, macht die Flex-Elemente reaktionsfähig. Damit sie sich auch nach dem Umbruch ihrem Container anpassen, müssen sie wachsen "flex-grow: 1;".


Der Quelltext wurde erfolgreich in die Zwischenablage kopiert.
HTML Elemente

Hinweise

Der Container wird  "display:flex;"  und "flex-wrap: wrap;" zum Umbruch vorbereitet. 

Die Boxen erhalten eine Minimalbreite "min-width: 400px;" und Basis-Wert "flex-basis: 33.3333%;" .

Wachsende Boxen werden mit "flex-grow: 1;" erreicht. Wird der Wert zurückgesetzt "flex-grow: 0;", findet der gleiche Umbruch statt, aber die Boxen behalten ihre Minimalgrösse.

Padding und Margin in Flex-Elementen verändert die Grössenangaben, da es die Werte kumuliert. Mit "box-sizing: border-box;" wird dies verhindert, der Basis-Wert bleibt auch mit Padding. Werden die Ränder von body und container zurückgesetzt, finden die Umbrüche beim Wechsel der Breite des Browserfensters, entsprechend der Minimalbreite eines Fex-Elements statt (bei "min-width: 400px;"):

  • Browserfenster 400Pixel Breite: Die drei Boxen sind untereinander
  • Browserfenster 800Pixel Breite: Zwei Boxen füllen die obere Zeile, die dritte Box füllt die untere Zeile
  • Browserfenster 1200Pixel Breite: Die drei Boxen sind nebeneinander

4 Boxen verändern den Flex-Basis-Wert auf "flex-basis: 25%;" und die Maximalbreite auf "min-width: 300px;". Dabei ergeben sich folgende Werte für den Umbruch:

  • Browserfenster 300Pixel Breite: Die vier Boxen sind untereinander
  • Browserfenster 600Pixel Breite: Zwei Boxen füllen die obere Zeile, zwei Boxen füllen die untere Zeile
  • Browserfenster 900Pixel Breite: Drei Boxen füllen die obere Zeile, die vierte Box füllt die untere Zeile
  • Browserfenster 1200Pixel Breite: Die drei Boxen sind nebeneinander

Beisiel mit 4 Boxen

DB-Table: flex-grow-4