Pancake scomposto

Si tratta di un layout comune per i siti di marketing, ad esempio, che possono avere una riga di tre elementi, in genere con un'immagine, un titolo e un testo che descrivono alcune funzionalità di un prodotto. Su schermi più piccoli, è preferibile che si impilino bene ed espandano man mano che le dimensioni dello schermo aumentano.

Se utilizzi flexbox per questo effetto, non avrai bisogno di query sui media per regolare il posizionamento di questi elementi quando le dimensioni dello schermo cambiano.

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

flex-grow Stretching

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

.parent {
  display: flex;
}

.child {
  flex: 1 1 150px;
}

Ora, quando aumenti o diminuisci le dimensioni dello schermo, questi elementi flessibili si riducono e si espandono.

Nessun allungamento

Se vuoi che le caselle vengano riempite fino alle dimensioni <flex-basis>, si riducano per le dimensioni più piccole, ma non si allunghino per riempire eventuali spazi aggiuntivi, scrivi: flex: 0 1 <flex-basis>. In questo caso, <flex-basis> è 150px:

.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;
}