Panqueca desconstruída

Esse é um layout comum para sites de marketing, por exemplo, que pode ter uma linha de três itens, geralmente com uma imagem, um título e um texto descrevendo alguns recursos de um produto. Em telas menores, é recomendável empilhá-las e expandir à medida que você aumenta o tamanho da tela.

Ao usar o flexbox para esse efeito, você não precisará de consultas de mídia para ajustar o posicionamento desses elementos quando a tela for redimensionada.

A abreviação flex significa: flex: <flex-grow> <flex-shrink> <flex-basis>.

flex-grow Alongamento

Se você quiser que as caixas se estiquem e preencham o espaço conforme vão se alinhar à próxima linha, defina o valor de <flex-grow> como 1. Por exemplo:

.parent {
  display: flex;
}

.child {
  flex: 1 1 150px;
}

Agora, conforme você aumenta ou diminui o tamanho da tela, esses itens flexíveis encolhem e aumentam.

Sem alongamento

Se você quiser que as caixas preencham o tamanho de <flex-basis>, reduza em tamanhos menores, mas sem esticar para preencher qualquer espaço adicional, escreva: flex: 0 1 <flex-basis>. Nesse caso, o <flex-basis> é 150 px:

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