Pancake scomposto

Si tratta di un layout comune per i siti di marketing, ad esempio, che possono avere una riga di tre elementi, di solito con un'immagine, un titolo e poi del testo che descrivono alcune caratteristiche di un prodotto. Sugli schermi più piccoli, ti consigliamo di posizionarli correttamente e di espanderli man mano che aumenti le dimensioni dello schermo.

Se utilizzi Flexbox per ottenere questo effetto, non avrai bisogno di query supporti per regolare il posizionamento di questi elementi quando lo schermo viene ridimensionato.

L'abbreviazione flex sta per: flex: <flex-grow> <flex-shrink> <flex-basis>.

Stretching di flex-grow

Se vuoi che le caselle si allunghino e riempiano lo spazio mentre si uniscono alla riga successiva, imposta il valore di <flex-grow> su 1, ad esempio:

.parent {
  display: flex;
}

.child {
  flex: 1 1 150px;
}

Ora, man mano che aumenti o diminuisci le dimensioni dello schermo, questi elementi flessibili si restringono e crescono.

Niente stretching

Se vuoi che le tue scatole siano riempite alle dimensioni di <flex-basis>, riducile in dimensioni più piccole, ma non allungarle per riempire qualsiasi spazio aggiuntivo, scrivi: flex: 0 1 <flex-basis>. In questo caso, il tuo <flex-basis> è 150 px:

.parent {
  display: flex;
}

.child {
  flex: 0 1 150px;
}

HTML

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

CSS

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

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