Zerlegte Pfannkuchen

Dies ist ein gängiges Layout für Marketing-Websites, die beispielsweise eine Reihe von drei Elementen haben können, in der Regel mit einem Bild, einem Titel und dann einem Text, in dem einige Funktionen eines Produkts beschrieben werden. Auf kleineren Bildschirmen sollten sie gut übereinander liegen und sich mit zunehmender Bildschirmgröße ausdehnen.

Wenn Sie Flexbox für diesen Effekt verwenden, sind keine Media-Abfragen erforderlich, um die Platzierung dieser Elemente bei einer Größenänderung des Bildschirms anzupassen.

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

Wenn die Felder beim Umbruch in die nächste Zeile gedehnt werden und den gesamten verfügbaren Platz ausfüllen sollen, legen Sie den Wert von <flex-grow> beispielsweise auf 1 fest:

.parent {
  display: flex;
}

.child {
  flex: 1 1 150px;
}

Wenn Sie die Bildschirmgröße jetzt vergrößern oder verkleinern, werden diese Flex-Elemente verkleinert und vergrößert.

Kein Strecken

Wenn Sie möchten, dass die Felder ihre <flex-basis>-Größe erreichen, bei kleineren Größen schrumpfen, sich aber nicht dehnen, um zusätzlichen Platz zu füllen, geben Sie Folgendes ein: flex: 0 1 <flex-basis>. In diesem Fall beträgt <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;
}