Zerlegte Pfannkuchen

Dies ist beispielsweise ein gängiges Layout für Marketing-Websites, das eine Reihe von drei Elementen enthalten kann, in der Regel mit einem Bild, einem Titel und dann etwas Text, der einige Funktionen eines Produkts beschreibt. Auf kleineren Bildschirmen sollten diese gut gestapelt und vergrößert werden, wenn Sie den Bildschirm vergrößern.

Wenn Sie für diesen Effekt eine Flexbox verwenden, sind keine Medienabfragen erforderlich, um die Platzierung dieser Elemente anzupassen, wenn sich die Größe des Bildschirms ändert.

Die Abkürzung flex steht für flex: <flex-grow> <flex-shrink> <flex-basis>.

Dehnübungen in flex-grow

Wenn die Felder gestreckt und die Fläche füllen sollen, wenn sie sich in der nächsten Zeile befinden, setzen Sie den Wert von <flex-grow> auf 1. Beispiel:

.parent {
  display: flex;
}

.child {
  flex: 1 1 150px;
}

Wenn Sie nun die Bildschirmgröße erhöhen oder verringern, werden diese flexiblen Elemente sowohl kleiner als auch größer.

Keine Dehnübungen

Wenn Sie möchten, dass die Boxen ihre <flex-basis>-Größe füllen, verkleinern Sie sie auf kleinere Größen, aber strecken Sie sie nicht, um zusätzlichen Platz zu füllen, schreiben Sie: flex: 0 1 <flex-basis>. In diesem Fall ist die <flex-basis> 150 Pixel:

.parent {
  display: flex;
}

.child {
  flex: 0 1 150px;
}

<div class="parent">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>

        .parent {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.box {
  /*  Stretching: */
  flex: 1 1 150px; 
  margin: 5px;
  background: red;
  gap: 1rem;
}